/* ==========================================================================
   AURIS · site.css (etapa 6) · primitivos e casca compartilhada pelas 4 páginas
   Só tokens do design system (tokens.css). Zero hex, zero nome de fonte.
   Estilo de cada seção fica no <style> escopado por #id dentro do HTML.
   ========================================================================== */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
html{overflow-x:clip} /* nunca no body: quebraria position:sticky e cria contêiner de scroll */
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:var(--lh-title);letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--c-focus);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--c-accent-soft);color:var(--c-text)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--px)}
.section{padding-block:var(--section-y)}

/* ---------- tipografia ---------- */
.h2{font-size:var(--fs-h2);line-height:var(--lh-title)}
.h3{font-size:var(--fs-h3);font-weight:600;line-height:1.2;letter-spacing:-.01em}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--c-muted)}
.muted{color:var(--c-muted)}
.mono,.tag{font-family:var(--font-mono)}
.tag{font-size:var(--fs-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--c-n400)}
.eyebrow{display:flex;align-items:center;gap:.9em;font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--s-5)}
.eyebrow b{font-weight:500;color:var(--c-accent);display:inline-flex;align-items:center;gap:.9em}
.eyebrow b::after{content:"";width:28px;height:1px;background:var(--c-line-strong)}

/* ---------- botões (o CTA é o link do WhatsApp: data-cta="whatsapp") ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:56px;padding:18px 32px;
  border-radius:var(--r-md);font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.btn--primary{background:var(--c-primary);color:var(--c-dark)}
.btn--primary:hover{background:var(--c-primary-dark);box-shadow:var(--shadow-cta);transform:translateY(-1px)}
.btn--primary:active{transform:none}
.btn--ghost{border:1px solid var(--c-line-strong);color:var(--c-text);min-height:46px;padding:13px 20px;font-size:.9375rem}
.btn--ghost:hover{border-color:var(--c-text)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-4) var(--s-6);margin-top:var(--s-7)}
.cta-row__micro{font-size:var(--fs-small);line-height:1.5;color:var(--c-muted);max-width:40ch}

/* ---------- cabeçalho ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header-h);display:flex;align-items:center;
  border-bottom:1px solid transparent;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.site-header.is-scrolled,.site-header.is-menu{background:color-mix(in srgb,var(--c-bg) 92%,transparent);border-bottom-color:var(--c-line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6)}
.brand{display:block;flex:0 0 auto;position:relative;z-index:2}
.brand img{height:var(--logo-h-header);width:auto}
.nav{display:flex;align-items:center;gap:var(--s-6)}
.nav__link{font-weight:500;font-size:.9375rem;color:var(--c-n200);padding-block:6px;border-bottom:1px solid transparent;transition:color var(--dur-fast),border-color var(--dur-fast)}
.nav__link:hover{color:var(--c-text);border-bottom-color:var(--c-accent)}
.nav__cta{margin-left:var(--s-2)}
.menu-toggle{display:none;position:relative;z-index:2}
@media (max-width:900px){
  .menu-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:48px;height:48px;margin-right:-10px}
  .menu-toggle span{display:block;width:24px;height:1.5px;background:currentColor;transition:transform var(--dur) var(--ease),opacity var(--dur-fast)}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .nav{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);z-index:1;flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--header-h) + var(--s-5)) var(--s-6) var(--s-6);background:var(--c-surface);border-left:1px solid var(--c-line);
    box-shadow:var(--shadow-lg);transform:translateX(100%);visibility:hidden;
    transition:transform var(--dur) var(--ease),visibility 0s linear var(--dur)}
  .nav.is-open{transform:none;visibility:visible;transition:transform var(--dur) var(--ease)}
  .nav__link{padding:18px 0;border-bottom:1px solid var(--c-line);font-size:1.0625rem;color:var(--c-text)}
  .nav__cta{margin:var(--s-6) 0 0}
  .nav__cta.btn--ghost{min-height:56px;background:var(--c-primary);color:var(--c-dark);border-color:var(--c-primary)}
}

/* ---------- rodapé ---------- */
.site-footer{border-top:1px solid var(--c-line);padding-block:var(--s-9) var(--s-6);background:var(--c-bg)}
.site-footer__grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-8);align-items:end}
.site-footer__brand img{height:var(--logo-h-footer);width:auto}
.site-footer__info{display:grid;grid-template-columns:repeat(3,max-content);justify-content:end;gap:var(--s-5) var(--s-8);margin:0}
.site-footer__info dt{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--c-n400)}
.site-footer__info dd{margin:var(--s-2) 0 0;font-size:1rem}
.site-footer__info a{border-bottom:1px solid var(--c-line-strong);transition:border-color var(--dur-fast)}
.site-footer__info a:hover{border-bottom-color:var(--c-accent)}
.site-footer__legal{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-4) var(--s-6);
  margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--c-line);font-size:var(--fs-small);color:var(--c-n400)}
.site-footer__legal nav{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.site-footer__legal a,.site-footer__legal button{color:var(--c-muted);border-bottom:1px solid transparent}
.site-footer__legal a:hover,.site-footer__legal button:hover{color:var(--c-text);border-bottom-color:var(--c-line-strong)}
@media (max-width:900px){
  .site-footer__grid{grid-template-columns:1fr;align-items:start}
  .site-footer__info{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:start}
}
@media (max-width:560px){
  .site-footer__info{grid-template-columns:1fr}
  .site-footer__legal{flex-direction:column;align-items:flex-start}
}

/* ---------- figura técnica (legenda mono tipo prancha) ---------- */
.fig-tag{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-3);
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--c-n400)}
.fig-tag b{font-weight:500;color:var(--c-n200)}
.zoom-btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-n200);border:1px solid var(--c-line-strong);border-radius:var(--r-sm);padding:8px 12px;
  background:color-mix(in srgb,var(--c-dark) 70%,transparent);transition:border-color var(--dur-fast),color var(--dur-fast)}
.zoom-btn:hover{border-color:var(--c-text);color:var(--c-text)}
.zoom-btn svg{width:14px;height:14px}

/* SVG do raio-x (classes no lugar de cor fixa) */
.rx-ghost{fill:none;stroke:var(--c-line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.rx-ghost--dash{stroke-dasharray:4 6}
.rx-solid{fill:var(--c-surface-3);stroke:var(--c-line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.rx-net{fill:none;stroke:var(--c-text);stroke-opacity:.5;stroke-width:1.2;vector-effect:non-scaling-stroke}
.rx-live{fill:none;stroke:var(--c-accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.rx-node{fill:var(--c-bg);stroke:var(--c-text);stroke-opacity:.8;stroke-width:1.2;vector-effect:non-scaling-stroke}
.rx-node--live{stroke:var(--c-accent);stroke-opacity:1}
.rx-halo{fill:var(--c-glow);fill-opacity:.18}
.rx-txt{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;fill:var(--c-muted)}
.rx-txt--live{fill:var(--c-accent)}
.rx-txt--dim{fill:var(--c-n500)}

/* ---------- banner de cookies (SEMPRE à esquerda: o canto direito é do botão de conversão) ---------- */
.cookie{position:fixed;left:20px;bottom:20px;z-index:70;width:min(460px,calc(100vw - 40px));display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:12px 18px;background:var(--c-surface-2);color:var(--c-text);border:1px solid var(--c-line-strong);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:14px 16px 14px 18px;font-size:.8125rem;line-height:1.45}
.cookie[hidden]{display:none}
.cookie p{color:var(--c-n200)}
.cookie a{border-bottom:1px solid var(--c-line-strong);white-space:nowrap}
.cookie__actions{display:flex;gap:8px}
.cookie__actions button{min-height:40px;padding:8px 14px;border-radius:var(--r-sm);font-family:var(--font-display);font-weight:600;font-size:.8125rem}
.cookie [data-cookie-accept]{background:var(--c-text);color:var(--c-dark)}
.cookie [data-cookie-reject]{border:1px solid var(--c-line-strong)}
.cookie [data-cookie-reject]:hover{border-color:var(--c-text)}
@media (max-width:560px){
  .cookie{left:12px;right:auto;bottom:12px;width:calc(100vw - 24px);grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 14px;font-size:.78125rem;line-height:1.4}
  .cookie__actions button{flex:1 1 0;min-height:38px}
}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--c-dark) 94%,transparent);padding:clamp(16px,4vw,48px)}
.lb.is-open{display:flex}
.lb__stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(1200px,100%)}
.lb__stage img{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:var(--r-sm);background:var(--c-surface)}
.lb__cap{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--c-n200);text-align:center}
.lb__x,.lb__nav{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--c-line-strong);
  border-radius:var(--r-md);color:var(--c-text);background:var(--c-surface)}
.lb__x:hover,.lb__nav:hover{border-color:var(--c-text)}
.lb__x{top:16px;right:16px}
.lb__prev{left:16px;top:50%;transform:translateY(-50%)}
.lb__next{right:16px;top:50%;transform:translateY(-50%)}
.lb__x svg,.lb__nav svg{width:20px;height:20px}
@media (max-width:640px){.lb__prev,.lb__next{top:auto;bottom:16px;transform:none}.lb__prev{left:calc(50% - 56px)}.lb__next{right:calc(50% - 56px)}}

/* ---------- reveal (fail-safe: só esconde com html.js; motion.js revela por scroll + observer + tempo) ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js [data-delay="1"]{transition-delay:.12s}
html.js [data-delay="2"]{transition-delay:.24s}
html.js [data-delay="3"]{transition-delay:.36s}
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- página de texto (política) ---------- */
.doc{padding-top:calc(var(--header-h) + var(--s-8));padding-bottom:var(--s-9)}
.doc__in{max-width:var(--container-narrow)}
.doc h1{font-size:var(--fs-h1);margin-bottom:var(--s-5)}
.doc h2{font-size:var(--fs-h3);margin:var(--s-8) 0 var(--s-4)}
.doc p,.doc li{color:var(--c-n200);max-width:68ch}
.doc p+p{margin-top:var(--s-4)}
.doc ul{padding-left:1.2em;display:grid;gap:var(--s-2);margin-top:var(--s-4)}
.doc a{border-bottom:1px solid var(--c-line-strong)}
.doc .tag{display:block;margin-bottom:var(--s-4)}

/* ==========================================================================
   ETAPA 7 · camada de movimento (cinematográfico: lento, preciso, silencioso)
   Só transform/opacity/stroke-dashoffset/clip-path, só tokens. Estados escondidos só em
   html.js + sem reduced-motion; quem revela é o motion.js (observer + scroll + tempo).
   Scroll nativo: nada pinado, nada de hijack de wheel.
   ========================================================================== */
.rx-halo{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion: no-preference){
  /* atrasos por data-delay viram variável, para as variantes abaixo respeitarem o stagger */
  html.js [data-delay="1"]{--au-d:.12s}
  html.js [data-delay="2"]{--au-d:.24s}
  html.js [data-delay="3"]{--au-d:.36s}

  /* hero: zoom lento invertido (assenta de 1,08 para 1); o parallax usa `translate`, não colide */
  @keyframes au-hero-zoom{from{scale:1.08}to{scale:1}}
  html.js .hero-media{animation:au-hero-zoom 2.4s var(--ease) both}
  /* a mídia ganha folga só quando o JS liga o parallax (sem JS/touch/reduced-motion não muda nada) */
  html.au-px :is(#hero,#fecho) [data-parallax]{top:-40px;height:calc(100% + 80px)}

  /* títulos grandes (h1 do hero e do fecho): sobem de baixo para cima por clip-path */
  html.js :is(#hero-t,#fecho-t)[data-reveal]{opacity:1;transform:translateY(.3em);clip-path:inset(100% 0 0 0);
    transition:transform 1.15s var(--ease) var(--au-d,0s),clip-path 1.15s var(--ease) var(--au-d,0s)}
  html.js :is(#hero-t,#fecho-t)[data-reveal].is-in{transform:none;clip-path:inset(-.25em -.1em -.25em -.1em)}

  /* prancha/figura: descoberta da esquerda para a direita, como folha que se destapa */
  /* (20/10) a descoberta por clip-path cortava legenda e botão no meio: virou entrada por opacidade + subida curta */
  html.js :is(#documentacao .sp01__sheet,#tipos .tpu__det,#sobre .sbp06__media)[data-reveal]{opacity:0;transform:translateY(44px) scale(.965);transform-origin:50% 100%;clip-path:none;
    transition:opacity 1s var(--ease) var(--au-d,0s),transform 1.2s var(--ease) var(--au-d,0s)}
  html.js :is(#documentacao .sp01__sheet,#tipos .tpu__det,#sobre .sbp06__media)[data-reveal].is-in{opacity:1;transform:none}

  /* listas mono: o bloco fica, os itens entram em cascata curta */
  html.js :is(.pf16__list,.sp01__specs)[data-reveal]{opacity:1;transform:none;transition:none}
  html.js :is(.pf16__list,.sp01__specs)[data-reveal]>*{opacity:0;transform:translateX(-10px);
    transition:opacity .8s var(--ease) calc(var(--i,0) * 90ms),transform .8s var(--ease) calc(var(--i,0) * 90ms)}
  html.js :is(.pf16__list,.sp01__specs)[data-reveal].is-in>*{opacity:1;transform:none}
  html.js :is(.pf16__list,.sp01__specs)[data-reveal]>:nth-child(2){--i:1}
  html.js :is(.pf16__list,.sp01__specs)[data-reveal]>:nth-child(3){--i:2}
  html.js :is(.pf16__list,.sp01__specs)[data-reveal]>:nth-child(4){--i:3}
  html.js :is(.pf16__list,.sp01__specs)[data-reveal]>:nth-child(5){--i:4}
  html.js :is(.pf16__list,.sp01__specs)[data-reveal]>:nth-child(6){--i:5}
  html.js :is(.pf16__list,.sp01__specs)[data-reveal]>:nth-child(7){--i:6}
  html.js :is(.pf16__list,.sp01__specs)[data-reveal]>:nth-child(8){--i:7}

  /* serviços: cards sobem um pouco mais, devagar */
  html.js #servicos .sca03__card[data-reveal]{transform:translateY(32px)}
  html.js #servicos .sca03__card[data-reveal].is-in{transform:none}

  /* esquema do canteiro sobe mais; card do FAQ entra pela esquerda */
  html.js #canteiro .rel04__fig[data-reveal]{transform:translateY(28px)}
  html.js #canteiro .rel04__fig[data-reveal].is-in{transform:none}
  html.js #faq .fmc04__card[data-reveal]{transform:translateX(-20px)}
  html.js #faq .fmc04__card[data-reveal].is-in{transform:none}

  /* diagrama unifilar (tipos): alimentadores brancos primeiro, o barramento âmbar por último */
  html.js #tipos .tpu__list::before,
  html.js #tipos .tpu__ckt::before,
  html.js #tipos .tpu__drop::before{transition:transform .9s var(--ease) var(--au-t,0s),background var(--dur) var(--ease)}
  html.js #tipos .tpu__drop::after,
  html.js #tipos .tpu__id{transition:opacity .7s var(--ease) var(--au-t,0s),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
  html.js #tipos .tpu__diagram[data-reveal]:not(.is-in) .tpu__list::before{transform:scaleY(0);transform-origin:top}
  html.js #tipos .tpu__diagram[data-reveal]:not(.is-in) .tpu__ckt::before{transform:scaleX(0);transform-origin:left}
  html.js #tipos .tpu__diagram[data-reveal]:not(.is-in) .tpu__drop::before{transform:scaleY(0);transform-origin:top}
  html.js #tipos .tpu__diagram[data-reveal]:not(.is-in) .tpu__drop::after,
  html.js #tipos .tpu__diagram[data-reveal]:not(.is-in) .tpu__id{opacity:0}
  html.js #tipos .tpu__ckt:nth-child(1){--au-t:.15s}
  html.js #tipos .tpu__ckt:nth-child(2){--au-t:.27s}
  html.js #tipos .tpu__ckt:nth-child(3){--au-t:.39s}
  html.js #tipos .tpu__ckt:nth-child(4){--au-t:.51s}
  html.js #tipos .tpu__ckt:nth-child(5){--au-t:.63s}
  html.js #tipos .tpu__ckt:nth-child(6){--au-t:.75s}
  /* o âmbar desenha depois: alimentador de entrada, depois o barramento da esquerda para a direita */
  html.js #tipos .tpu__list::before{--au-t:1.2s}
  html.js #tipos .tpu__ckt:nth-child(1)::before{--au-t:1.2s}
  html.js #tipos .tpu__ckt:nth-child(2)::before{--au-t:1.32s}
  html.js #tipos .tpu__ckt:nth-child(3)::before{--au-t:1.44s}
  html.js #tipos .tpu__ckt:nth-child(4)::before{--au-t:1.56s}
  html.js #tipos .tpu__ckt:nth-child(5)::before{--au-t:1.68s}
  html.js #tipos .tpu__ckt:nth-child(6)::before{--au-t:1.8s}
  /* hover não herda os atrasos da entrada */
  html.js #tipos .tpu__diagram.is-in .tpu__ckt:hover .tpu__drop::before{transition-delay:0s,0s}
  @media (max-width:560px){
    /* lista vertical: a barra âmbar de cada linha desce (scaleY) em vez de correr (scaleX) */
    html.js #tipos .tpu__diagram[data-reveal]:not(.is-in) .tpu__ckt::before{transform:scaleY(0);transform-origin:top}
    html.js #tipos .tpu__diagram[data-reveal]:not(.is-in) .tpu__drop::before{transform:scaleX(0);transform-origin:left}
  }
}
@media (prefers-reduced-motion: reduce){
  html.js .hero-media{animation:none}
  html.js [data-reveal]{clip-path:none}
}

/* ---- raio-x: cursor "Arraste" (mouse) e dica de toque (20/10) ---- */
html.js #caso-samel .rx__stage.has-cursor{cursor:none}
.rx__cursor{position:absolute;left:0;top:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:96px;height:96px;border-radius:50%;background:var(--c-primary);color:var(--c-dark);pointer-events:none;opacity:0;scale:.6;transition:opacity .2s var(--ease),scale .25s var(--ease);will-change:transform}
.rx__cursor svg{width:26px;height:26px}
.rx__cursor b{font-family:var(--font-mono);font-weight:500;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase}
.rx__cursor.is-on{opacity:1;scale:1}
.rx__cursor.is-drag{scale:.82}
.rx__hint{position:absolute;left:50%;top:58%;z-index:4;translate:-50% -50%;display:inline-flex;align-items:center;gap:var(--s-2);padding:10px 16px;border-radius:999px;background:color-mix(in srgb,var(--c-dark) 78%,transparent);border:1px solid var(--c-line-strong);color:var(--c-text);pointer-events:none;transition:opacity .35s var(--ease)}
.rx__hint svg{flex:none;width:20px;height:20px;color:var(--c-primary)}
.rx__hint b{font-family:var(--font-mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.rx__hint.is-off{opacity:0}
@media (prefers-reduced-motion: reduce){.rx__cursor,.rx__hint{display:none}}

/* ---- botão de ampliar sobre imagem: ícone no canto, texto só no hover/foco (20/10) ---- */
:is(.sp01__zoom,.tpu__det,.sbp06__media) .zoom-btn{gap:0;padding:8px}
:is(.sp01__zoom,.tpu__det,.sbp06__media) .zoom-btn svg{width:16px;height:16px}
.sp01__zoom .zoom-btn{font-size:0;letter-spacing:0;transition:font-size 0s,padding var(--dur-fast) var(--ease),border-color var(--dur-fast),color var(--dur-fast)}
@media (hover:hover){.sp01__zoom:hover .zoom-btn,.sp01__zoom:focus-visible .zoom-btn{font-size:var(--fs-label);letter-spacing:.1em;gap:.5em;padding:8px 12px}}
#documentacao .sp01__zoom img{backface-visibility:hidden}

/* ---- documento simulado (prancha SVG + lista em tabela), sem imagem — 20/10 ---- */
.doc-sheet{margin:0;background:var(--c-text);color:var(--c-dark);border-radius:var(--r-sm);box-shadow:var(--shadow-md);overflow:hidden}
.doc-prancha{padding:clamp(6px,1vw,10px)}
.doc-prancha__svg{display:block;width:100%;height:auto}
.doc-prancha__svg *{vector-effect:non-scaling-stroke}
.doc-prancha .pr-frame{fill:none;stroke:var(--c-dark);stroke-width:1.4}
.doc-prancha .pr-thin{fill:none;stroke:color-mix(in srgb,var(--c-dark) 55%,transparent);stroke-width:.6}
.doc-prancha .pr-wall{fill:none;stroke:var(--c-dark);stroke-width:2.4;stroke-linejoin:miter}
.doc-prancha .pr-door{fill:none;stroke:color-mix(in srgb,var(--c-dark) 70%,transparent);stroke-width:.7}
.doc-prancha .pr-pt{fill:none;stroke:var(--c-dark);stroke-width:.9}
.doc-prancha .pr-tom{fill:none;stroke:var(--c-dark);stroke-width:1.6}
.doc-prancha .pr-uni{fill:none;stroke:var(--c-dark);stroke-width:.9}
.doc-prancha .pr-brk{fill:var(--c-text);stroke:var(--c-dark);stroke-width:.9}
.doc-prancha .pr-live{fill:none;stroke:var(--c-primary-dark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.doc-prancha .pr-qd{fill:var(--c-dark)}
.doc-prancha .pr-txt{font-family:var(--font-mono);font-size:6.2px;letter-spacing:.06em;fill:color-mix(in srgb,var(--c-dark) 78%,transparent);stroke:none}
.doc-prancha .pr-txt--h{font-size:6.6px;fill:var(--c-dark)}
.doc-prancha .pr-txt--b{font-weight:500;fill:var(--c-dark)}
.doc-lista__t{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--font-mono);font-size:clamp(.625rem,.55rem + .25vw,.75rem);line-height:1.35;color:var(--c-dark)}
.doc-lista__t th,.doc-lista__t td{border:1px solid color-mix(in srgb,var(--c-dark) 32%,transparent);padding:5px 7px;text-align:left;vertical-align:top}
.doc-lista__t thead th{background:color-mix(in srgb,var(--c-dark) 12%,transparent);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:.92em}
.doc-lista__t .doc-lista__title{text-align:center;background:transparent;font-size:1em;letter-spacing:.08em;padding:8px 7px}
.doc-lista__c-item{width:3.6em}.doc-lista__c-qt{width:4.8em}.doc-lista__c-un{width:4.2em}
.doc-lista__t thead tr:last-child th:nth-child(1),.doc-lista__t tbody td:nth-child(1){text-align:right}
.doc-lista__t thead tr:last-child th:nth-child(3),.doc-lista__t tbody tr:not(.doc-lista__grp):not(.doc-lista__more) td:nth-child(3){text-align:right}
.doc-lista__t .doc-lista__grp td{background:color-mix(in srgb,var(--c-dark) 7%,transparent);text-transform:uppercase;letter-spacing:.06em}
.doc-lista__t .doc-lista__grp td:nth-child(2){text-align:center}
.doc-lista__t tr.is-mark td{background:color-mix(in srgb,var(--c-primary) 45%,transparent)}
.doc-lista__t .doc-lista__more td{color:color-mix(in srgb,var(--c-dark) 60%,transparent);font-style:italic;border-bottom:0}
.doc-lista__t .doc-lista__more td:last-child{text-align:left}
/* A: folha sobre folha na Documentação */
#documentacao .sp01__plan.is-docsim{display:block;position:relative}
#documentacao .is-docsim .doc-prancha{width:92%}
#documentacao .is-docsim .doc-lista{position:relative;z-index:2;width:80%;margin:-7% 0 0 auto}
@media (max-width:900px){
  #documentacao .is-docsim .doc-prancha{width:100%}
  #documentacao .is-docsim .doc-lista{width:94%;margin-top:-10%}
}
@media (max-width:560px){
  #documentacao .is-docsim .doc-lista{width:100%;margin-top:var(--s-4)}
}