@layer theme, manual, base, components, utilities;
@font-face{font-family:"Outfit";src:url(/assets/fonts/Outfit-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"Nico Moji";src:url(/assets/fonts/NicoMoji-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@layer manual{
/* Manual Oceanos (4 marcas): tokens comuns + destaque por marca (html[data-marca], gerado de marcas/*.py).
   Base de bandejas e peças herdada do manual da Clayservice (base.css, inserida no marcador abaixo). --cp é o recuo único de cartão. */
:root{
  --grafite:#1F1F1F;--nevoa:#F1F1F1;--cinza-200:#DBDBDB;--cinza-300:#C1C1C1;--cinza-500:#878E94;--cinza-700:#575D63;
  --canvas:#FAFAFA;--tray:#FAFAFA;--part:#F1F1F1;--part-hover:#E8E8E8;--part-soft:#F7F7F7;
  --ink:#1F1F1F;--ink-muted:#575D63;--primary:var(--acc-l);--primary-hover:var(--acc-l-h);--on-primary:#F1F1F1;
  --inverse:#1F1F1F;--on-inverse:#F1F1F1;--link:var(--acc-l);
  --divider:rgba(31,31,31,.07);--control-ring:rgba(31,31,31,.22);--track:rgba(31,31,31,.12);
  --success:#1F9D55;--success-soft:#E3F4EA;--success-ink:#18804A;--warning-soft:#FBEFD9;--warning-ink:#975A00;--danger:#E5484D;--danger-soft:#FCE9E8;--danger-ink:#C9363B;
  --shadow-tray:0 0 0 1px rgba(31,31,31,.06),0 1px 1px rgba(31,31,31,.04),0 6px 16px -6px rgba(31,31,31,.1),0 22px 44px -24px rgba(31,31,31,.16);
  --surface:var(--tray);--sunken:var(--part-soft);--muted:var(--ink-muted);--line:var(--divider);--line-strong:var(--control-ring);
  --brand:var(--primary);--on-brand:var(--on-primary);--accent:var(--marca-2);--on-accent:var(--grafite);--focus:var(--primary);
  --lg1:var(--acc-l);--lg2:var(--acc-d);--wave-on:var(--primary);--wave-off:rgba(31,31,31,.18);
  --mono:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;--serif:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;--nico:"Nico Moji","Outfit",sans-serif;
  --foto:radial-gradient(70% 60% at 70% 30%,rgba(233,162,122,.55),transparent 60%),linear-gradient(180deg,#2B3F78 0%,#1B2D5C 55%,#0E1630 100%);
  --r-sm:9999px;--r-md:22px;--r-lg:30px;
  --s1:4px;--s2:8px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;
  --cp:24px;--sec:96px;--max:1200px;--hdr:76px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --canvas:#1F1F1F;--tray:#2A2A2A;--part:#383838;--part-hover:#404040;--part-soft:#333333;
  --ink:#F1F1F1;--ink-muted:#ABB1B6;--primary:var(--acc-d);--primary-hover:var(--acc-d-h);--on-primary:#1F1F1F;
  --inverse:#F1F1F1;--on-inverse:#1F1F1F;--link:var(--acc-d);
  --divider:rgba(255,255,255,.08);--control-ring:rgba(255,255,255,.24);--track:rgba(255,255,255,.14);
  --success:#3DD68C;--success-soft:#1F3328;--success-ink:#3DD68C;--warning-soft:#3A2E17;--warning-ink:#F5B547;--danger:#FF6369;--danger-soft:#3B2122;--danger-ink:#FF6369;
  --shadow-tray:0 0 0 1px rgba(255,255,255,.07),0 1px 1px rgba(0,0,0,.3),0 6px 16px -6px rgba(0,0,0,.45),0 22px 44px -24px rgba(0,0,0,.6);
  --wave-off:rgba(255,255,255,.2);color-scheme:dark}}
:root[data-theme="dark"]{
  --canvas:#1F1F1F;--tray:#2A2A2A;--part:#383838;--part-hover:#404040;--part-soft:#333333;
  --ink:#F1F1F1;--ink-muted:#ABB1B6;--primary:var(--acc-d);--primary-hover:var(--acc-d-h);--on-primary:#1F1F1F;
  --inverse:#F1F1F1;--on-inverse:#1F1F1F;--link:var(--acc-d);
  --divider:rgba(255,255,255,.08);--control-ring:rgba(255,255,255,.24);--track:rgba(255,255,255,.14);
  --success:#3DD68C;--success-soft:#1F3328;--success-ink:#3DD68C;--warning-soft:#3A2E17;--warning-ink:#F5B547;--danger:#FF6369;--danger-soft:#3B2122;--danger-ink:#FF6369;
  --shadow-tray:0 0 0 1px rgba(255,255,255,.07),0 1px 1px rgba(0,0,0,.3),0 6px 16px -6px rgba(0,0,0,.45),0 22px 44px -24px rgba(0,0,0,.6);
  --wave-off:rgba(255,255,255,.2);color-scheme:dark}
@media (max-width:640px){:root{--cp:20px;--sec:64px}}
/* Base do manual Oceanos: regras de bandejas, peças, tabelas, celular e interações herdadas do manual da Clayservice (v1.5, aprovado),
   sem fontes, tokens nem a linguagem visual própria dela. Gerado por qa/scripts/base_css.py; ajustes da Oceanos vão em oceanos.css. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html.lock{overflow:hidden}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 16px/26px var(--serif)}
[id]{scroll-margin-top:calc(var(--hdr) + 24px)}
a{color:var(--link);text-underline-offset:3px}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--brand);color:var(--on-brand);padding:8px 16px;border-radius:var(--r-md);font:500 13px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

h1,h2,h3,h4{font-family:var(--mono);font-weight:500;margin:0;text-wrap:balance}
h2{font-size:clamp(28px,4cqi,44px);line-height:1.1;letter-spacing:-.5px}
h3{font-size:20px;line-height:26px}
h4{font-size:16px;line-height:22px}
p{margin:0;max-width:66ch}
.lbl{font:500 13px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.small{font-size:14px;line-height:22px;color:var(--muted)}
.lead{font-size:18px;line-height:28px;max-width:60ch}
code,.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}

/* seções */
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section.ch{padding-block:var(--sec);border-bottom:1px solid var(--line)}
.ch-h{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;align-items:end;margin-bottom:var(--s8)}
.ch-n{font:400 clamp(44px,5.6cqi,88px)/.9 var(--mono);color:transparent;-webkit-text-stroke:1px var(--muted);grid-row:span 2}
.ch-h .lbl{grid-column:2}
.ch-h h2{grid-column:2}
.ch-intro{margin:-8px 0 var(--s8);max-width:66ch}
.sub{margin-top:var(--s12)}
.sub>h3{margin-bottom:var(--s4)}
.sub>.small,.sub>p{margin-bottom:var(--s4)}
.stack{display:grid;gap:var(--s4)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--cp);min-width:0}
.card>*+*{margin-top:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;min-width:0;display:flex;flex-direction:column}
.tile .pv{display:grid;place-items:center;aspect-ratio:16/10;padding:var(--s6);border-bottom:1px solid var(--line)}
.tile .pv svg,.tile .pv img{max-height:100%;width:auto;max-width:100%}
.tile .bd{padding:var(--cp);display:grid;gap:8px;flex:1;align-content:start}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@container cs (max-width:960px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container cs (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.dls{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dl{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--r-md);
  font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--ink);text-decoration:none;background:transparent}
.dl:hover{border-color:var(--ink)}
.dl::before{content:"";width:12px;height:12px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M6 11l6 6 6-6M4 21h16'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M6 11l6 6 6-6M4 21h16'/%3E%3C/svg%3E") center/contain no-repeat}
.cp{font:500 12px/16px var(--mono);letter-spacing:.3px;padding:6px 10px;min-height:32px;border:1px solid var(--line);border-radius:var(--r-sm);background:transparent;color:var(--ink);cursor:pointer;text-align:left}
.cp:hover{border-color:var(--ink)}

/* capa */
.hero{padding-block:var(--s12) var(--sec)}
.hero-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:stretch}
@container cs (max-width:900px){.hero-g{grid-template-columns:minmax(0,1fr)}}
.hero h1{font-size:clamp(40px,6cqi,72px);line-height:1;letter-spacing:-1px;margin:12px 0 16px}
.ficha{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--line);font-size:14px;line-height:22px}
.ficha dt{font:500 12px/22px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.ficha dd{margin:0}
.stage{align-self:stretch;min-height:360px;padding-bottom:56px;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:16/11;display:grid;place-items:center;overflow:hidden}
@container cs (min-width:901px){.hero .stage{aspect-ratio:auto}.hero .hero-logo{width:min(58%,400px)}}
@container cs (max-width:900px){.hero .stage{align-self:start}}
@container cs (max-width:640px){.stage{aspect-ratio:4/3}}
.stage .ctl{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}
.hero-logo{width:min(46%,320px);height:auto;color:var(--lg1);overflow:visible}
.hero-logo .hf{fill:var(--lg2)}
.atalhos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-top:var(--s8)}
@container cs (max-width:900px){.atalhos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.atalho{display:grid;gap:12px;align-content:start;padding:var(--cp);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--ink)}
.atalho:hover{border-color:var(--ink)}
.atalho svg{width:28px;height:28px;color:var(--link)}
.atalho span{font:500 16px/22px var(--mono)}

/* animação do logo */
.anim .hg{transform-box:fill-box;transform-origin:62% 50%;animation:hg 1.1s cubic-bezier(.2,.8,.2,1) both}
.anim .hf{transform-box:fill-box;transform-origin:50% 50%;animation:hf .7s cubic-bezier(.2,.8,.2,1) .45s both}
.anim .hw{animation:hw .9s cubic-bezier(.2,.8,.2,1) .8s both}
@keyframes hg{from{transform:rotate(-120deg);opacity:0}to{transform:none;opacity:1}}
@keyframes hf{from{transform:scale(.4) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
@keyframes hw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.spin .sg{transform-box:fill-box;transform-origin:62% 50%;animation:sg 2.4s linear infinite}
@keyframes sg{to{transform:rotate(360deg)}}
html.pause-all *,html.pause-all *::before{animation-play-state:paused!important}
.paused,.paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.anim *,.spin *{animation:none!important}}

/* reveal (IntersectionObserver de disparo único, E23) */
.js-rv .rv:not(.in){opacity:0;transform:translateY(24px)}
.js-rv .rv{transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.rv .rv{opacity:1!important;transform:none!important}

/* logotipo */
.lstage{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s12) var(--s6);display:grid;place-items:center}
.lstage svg.diag{width:100%;max-width:880px;height:auto;color:var(--lg1);overflow:visible}
.lstage .ov{opacity:0;transition:opacity .2s}
.lstage.show-prot .ov-prot,.lstage.show-anat .ov-anat{opacity:1}
.toggles{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.toggles .btn[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.rule{border-left:2px solid var(--brand);padding-left:16px}
.bg-cl{background:var(--marca)}.bg-gr{background:var(--grafite)}.bg-nv{background:var(--nevoa)}.bg-c2{background:var(--cinza-200)}
.bg-foto{background:repeating-linear-gradient(135deg,#2a2f35 0 14px,#23272c 14px 28px)}
.resp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@container cs (max-width:640px){.resp{grid-template-columns:minmax(0,1fr)}}
.resp .pv{aspect-ratio:auto;min-height:140px}
dialog.big{width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:1px solid var(--line);border-radius:var(--r-lg);padding:0;background:var(--surface);color:var(--ink)}
dialog.big::backdrop{background:rgba(0,0,0,.55)}
dialog.big .dh{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--cp);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
dialog.big .db{padding:var(--cp);overflow:auto}
dialog.big .db svg{min-width:880px;width:100%;height:auto;color:var(--lg1)}

/* usos incorretos */
.wrong .pv{position:relative}
.wrong .pv::after{content:"×";position:absolute;right:16px;bottom:16px;width:28px;height:28px;border-radius:50%;background:#B42318;color:#FAFAFA;font:500 22px/28px var(--mono);text-align:center}

/* cores */
.sw{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.sw .chip{height:160px;padding:16px;display:flex;align-items:flex-end;font:500 13px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase}
.sw .bd{padding:var(--cp);display:grid;gap:8px}
.sw .vals{display:grid;gap:6px}
.prop{display:flex;height:72px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.prop div{display:flex;align-items:flex-end;padding:10px 12px;font:500 12px/14px var(--mono);letter-spacing:.5px}
.ap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@container cs (max-width:640px){.ap{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ap .chip{height:64px;border-radius:var(--r-md);border:1px solid var(--line)}

/* tabelas (viram cartões no celular, E17) */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table.t{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
table.t th{font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--muted);text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
table.t td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
table.t tr:last-child td{border-bottom:0}
@container cs (min-width:641px){table.t{min-width:640px}}
@container cs (max-width:640px){
  .tw{border:0;background:none;overflow:visible}
  table.t,table.t tbody,table.t tr,table.t td{display:block;width:100%}
  table.t thead{display:none}
  table.t tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px var(--cp);margin-bottom:12px}
  table.t td{border:0;padding:6px 0;display:grid;grid-template-columns:110px 1fr;gap:12px}
  table.t td::before{content:attr(data-l);font:500 11px/22px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
}
.ok{color:#127a3a}.no{color:#B42318}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ok{color:#5fd38d}:root:not([data-theme="light"]) .no{color:#ff8a80}}
:root[data-theme="dark"] .ok{color:#5fd38d}:root[data-theme="dark"] .no{color:#ff8a80}

/* tipografia */
.spec{display:grid;gap:12px}
.spec .big{font:500 clamp(48px,8cqi,104px)/1 var(--mono);letter-spacing:-1px;overflow-wrap:anywhere}
.spec .bigs{font:400 clamp(44px,7cqi,92px)/1.05 var(--serif);overflow-wrap:anywhere}
.spec .glyph{font:400 18px/30px var(--mono);overflow-wrap:anywhere;color:var(--muted)}
.tester textarea{width:100%;min-height:84px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:400 16px/24px var(--serif);resize:vertical}
.tester .out{padding:var(--cp);border:1px dashed var(--line);border-radius:var(--r-md);overflow-wrap:anywhere}
.tester .out.m{max-width:390px}

/* grid e espaço */
.scale{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.scale div{display:grid;gap:8px;justify-items:start}
.scale i{display:block;background:var(--brand)}
.radii{display:flex;flex-wrap:wrap;gap:24px}
.radii div{width:104px;height:104px;border:2px solid var(--brand);display:grid;place-items:center;font:500 12px/16px var(--mono)}
.fmt svg{width:100%;height:auto}

/* ícones */
.ib{columns:4 180px;column-gap:16px}
.ib .it{break-inside:avoid;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--cp);display:grid;gap:10px}
.ib .it svg{width:40px;height:40px;color:var(--ink)}
.ib .it .row{display:flex;flex-wrap:wrap;gap:6px}

/* movimento */
.mv-card .pv{aspect-ratio:16/9}
.mv-card .pv svg{width:52%;height:auto;color:var(--lg1)}
.mv-card .pv svg .hf,.mv-card .pv svg .sf{fill:var(--lg2)}
.mv-ctl{display:flex;flex-wrap:wrap;gap:8px}

/* digital */
.comp{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.field{display:grid;gap:8px;max-width:360px}
.field label{font:500 13px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase}
.field input{min-height:44px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:400 16px/24px var(--serif)}
.selo{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase}
.svc{display:grid;gap:10px}
.svc svg{width:32px;height:32px;color:var(--link)}
.fab{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--brand);color:var(--on-brand);font:500 13px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase}
@supports (corner-shape:squircle){.card,.tile,.sw,.stage,.lstage,.atalho,.tw,.ib .it,.prop{corner-shape:squircle}.fab,.round,.btn,.dl,.cp,.ib2,.badge,.selo,.st,.selo-t,.status,.ev,.chip-pill{corner-shape:round}}
.sig{background:#FAFAFA;border-radius:var(--r-md);padding:20px;overflow-x:auto;border:1px solid var(--line)}

/* aplicações */
.mk .pv{aspect-ratio:auto;height:260px;padding:0;background:var(--cinza-200)}
.mk .pv svg{width:100%;height:100%;display:block}
.mk .pv.fit{padding:20px}
.mk .pv.fit svg{width:auto;height:100%}

/* arquivos */
.kitbox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:var(--brand);color:var(--on-brand);border-radius:var(--r-lg);padding:calc(var(--cp) + 8px)}
.kitbox .lbl{color:var(--on-brand);opacity:.8}
.kitbox .btn{background:var(--nevoa);color:var(--grafite);border-color:var(--nevoa)}
@container cs (max-width:640px){.kitbox{grid-template-columns:minmax(0,1fr)}}
details.fold{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:8px}
details.fold summary{cursor:pointer;padding:14px var(--cp);font:500 14px/20px var(--mono);list-style:none;display:flex;gap:12px}
details.fold summary .small{margin-left:auto}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::after{content:"+";color:var(--muted)}
details.fold[open] summary::after{content:"−"}
details.fold .in{padding:0 var(--cp) var(--cp);display:grid;gap:6px}
details.fold .in a{font:400 13px/20px var(--mono);overflow-wrap:anywhere}
.aibox{border:1px solid var(--brand);border-radius:var(--r-lg);padding:calc(var(--cp) + 8px);background:var(--surface);display:grid;gap:20px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:st;padding:0;margin:0;list-style:none}
@container cs (max-width:640px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{counter-increment:st;display:grid;gap:6px;font-size:15px;line-height:22px}
.steps li::before{content:"Passo " counter(st);font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--link)}
.task{display:grid;gap:10px;align-content:start;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--cp);color:var(--ink);font:inherit}
.task:hover{border-color:var(--ink)}
.task b{font:500 16px/22px var(--mono)}
pre.prompt{white-space:pre-wrap;font:400 13px/20px var(--mono);background:var(--sunken);padding:var(--cp);border-radius:var(--r-md);max-height:520px;overflow:auto;margin:0}
.names{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
@container cs (max-width:900px){.names{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container cs (max-width:480px){.names{grid-template-columns:repeat(2,minmax(0,1fr))}}
.names div{border-top:2px solid var(--brand);padding-top:8px;display:grid;gap:4px;font-size:14px;line-height:20px}
.names b{font:500 14px/20px var(--mono);overflow-wrap:anywhere}
.st{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);font:500 11px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--line-strong)}
.st.pronto{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.st.parcial{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* página 2: estratégia */
.blk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--cp);display:grid;gap:10px;align-content:start;min-width:0}
.blk .hd{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.blk .hd h3{font-size:17px;line-height:23px}
.blk .why{font-size:14px;line-height:22px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.selo-t{justify-self:start;flex:none;display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--r-sm);font:500 11px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--line-strong);white-space:nowrap}
.selo-t[data-t="F"]{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.selo-t[data-t="P"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.selo-t[data-t="D"]{border-color:var(--ink)}
.selo-t[data-t="H"]{border-style:dashed}
.ev{font:500 12px/16px var(--mono);text-decoration:none;padding:1px 4px;border-radius:var(--r-sm);border:1px solid var(--line)}
.destaque{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.destaque .why,.destaque .lbl{color:var(--on-brand);opacity:.85;border-color:rgba(241,241,241,.35)}
.destaque .selo-t{border-color:var(--on-brand);color:var(--on-brand);background:transparent}
.voz{background:var(--brand);color:var(--on-brand);border-radius:var(--r-lg);padding:calc(var(--cp) + 16px);display:grid;gap:24px}
.voz .lbl{color:var(--on-brand);opacity:.8}
.voz .g2>div{border-top:1px solid rgba(241,241,241,.4);padding-top:12px;display:grid;gap:8px}
.voz .selo-t{border-color:var(--on-brand);color:var(--on-brand)}
.voz a{color:var(--on-brand)}
.map svg{width:100%;height:auto}
.jorn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@container cs (max-width:640px){.jorn{grid-template-columns:minmax(0,1fr)}}
.jorn div{border-top:2px solid var(--brand);padding-top:12px;display:grid;gap:6px;align-content:start}
ol.fontes{padding-left:0;list-style:none;display:grid;gap:10px;margin:0}
ol.fontes li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px var(--cp);display:grid;grid-template-columns:52px 1fr;gap:12px;font-size:15px;line-height:22px}
ol.fontes li:target{border-color:var(--brand);outline:2px solid var(--brand)}
ol.fontes .id{font:500 14px/22px var(--mono);color:var(--link)}
.c2card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:var(--s8);padding:var(--cp);border:1px solid var(--brand);border-radius:var(--r-lg);background:var(--surface);text-decoration:none;color:var(--ink)}
.c2card:hover{background:var(--brand);color:var(--on-brand)}

/* rodapé */
footer.ft{padding-block:var(--s12) calc(var(--s12) + 64px);background:var(--surface)}
.ft-g{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:start;font-size:14px;line-height:22px}
@container cs (max-width:640px){.ft-g{grid-template-columns:minmax(0,1fr)}}
.ft svg{width:44px;height:44px;color:var(--lg1)}

.top-a{align-items:start}
@container cs (min-width:641px){table.t td:first-child b.mono{white-space:nowrap}}
code{overflow-wrap:anywhere}
.atalhos.a3{grid-template-columns:repeat(3,minmax(0,1fr))}
@container cs (max-width:640px){.atalhos.a3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== v1.1 ===== */
/* títulos expressivos */
.ch-h h2 em{font-style:normal;color:var(--link)}
.ch-h .lbl b{color:var(--ink);font-weight:500}
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@container cs (max-width:640px){.themes{grid-template-columns:minmax(0,1fr)}}
.tm{border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden}
.tm .tm-h{display:flex;justify-content:space-between;align-items:center;padding:12px var(--cp);font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid}
.tm .tm-b{padding:var(--cp);display:grid;gap:14px}
.tm.claro{background:#F1F1F1;color:#1F1F1F}.tm.claro .tm-h{border-color:#C1C1C1}
.tm.escuro{background:#1F1F1F;color:#F1F1F1}.tm.escuro .tm-h{border-color:#878E94}
.tm .tm-card{border-radius:var(--r-md);padding:16px;display:grid;gap:8px}
.tm.claro .tm-card{background:#DBDBDB}.tm.escuro .tm-card{background:#000}
.tm .b1{display:inline-flex;padding:9px 14px;border-radius:8px;background:var(--acc-l);color:#F1F1F1;font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;justify-self:start}
.tm.claro .lnk{color:var(--acc-l)}.tm.escuro .lnk{color:var(--acc-d)}
.tm .mut{font-size:14px}.tm.claro .mut{color:#575D63}.tm.escuro .mut{color:#C1C1C1}
.tm svg.lg{height:26px;width:auto}
.tm.claro svg.lg{color:var(--acc-l);--lg2:var(--acc-d)}.tm.escuro svg.lg{color:#F1F1F1;--lg2:#F1F1F1}
/* funcionais */
.fn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@container cs (max-width:900px){.fn{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fn .card{display:grid;gap:8px}
.fn .dot{width:100%;height:56px;border-radius:var(--r-md)}
/* status de serviço */
.status{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;font:500 12px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--line-strong)}
.status i{width:8px;height:8px;border-radius:50%;background:currentColor}
.status.ag{color:var(--link)}.status.cam{color:#9A6700}.status.ok2{color:#127a3a}
:root[data-theme="dark"] .status.cam{color:#E3B341}:root[data-theme="dark"] .status.ok2{color:#5fd38d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .status.cam{color:#E3B341}:root:not([data-theme="light"]) .status.ok2{color:#5fd38d}}
@supports (corner-shape:squircle){.status,.status i{corner-shape:round}}
.field.err input{border-color:#B42318}
.field .msg{font-size:14px;line-height:20px;color:#B42318}
:root[data-theme="dark"] .field .msg{color:#ff8a80}
.toastdemo{display:inline-flex;gap:10px;align-items:center;padding:12px 16px;border-radius:var(--r-md);background:var(--ink);color:var(--surface);font:500 13px/18px var(--mono)}
.toastdemo svg{width:18px;height:18px}
/* ícone: tamanhos de referência */
.sizes{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end}
.sizes div{display:grid;gap:8px;justify-items:start}
.sizes .av{border-radius:50%;background:var(--marca);display:grid;place-items:center}
.sizes .ap{border-radius:22%;background:var(--marca);display:grid;place-items:center}
@supports (corner-shape:squircle){.sizes .av{corner-shape:round}}
.agua .pv{position:relative;overflow:hidden}
.agua .pv img{position:absolute;right:-8%;bottom:-18%;width:70%;max-height:none}
.agua .pv .t{position:relative;font:500 22px/1.2 var(--mono);align-self:start;justify-self:start}
/* padrões e composições */
.pat .pv{padding:0;aspect-ratio:16/10}
.pat .pv svg{width:100%;height:100%;display:block}
.comp3 .pv{padding:0;aspect-ratio:1/1}
.comp3 .pv svg,.comp3 .pv img{width:100%;height:100%;display:block}
/* fotografia */
.ref .pv{padding:0;aspect-ratio:16/10}
.ref .pv svg{width:100%;height:100%;display:block}
.ref .pv img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;display:block}
.ref .bd{grid-template-rows:auto 1fr auto}
.ref .ref-acoes{margin-top:4px;align-self:end}
.ref .tagf{position:absolute;left:12px;top:12px;background:var(--ink);color:var(--surface);font:500 11px/16px var(--mono);letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:4px}
.ref .pv{position:relative}
.dodont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@container cs (max-width:640px){.dodont{grid-template-columns:minmax(0,1fr)}}
.dodont ul{margin:0;padding-left:18px;display:grid;gap:6px}
/* ícones: filtro */
.ifilter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
/* lista de ícones */
.ilist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--line)}
@container cs (max-width:900px){.ilist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container cs (max-width:560px){.ilist{grid-template-columns:minmax(0,1fr)}}
.irow{display:grid;grid-template-columns:40px 1fr auto auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.irow svg{width:24px;height:24px;color:var(--link)}
.irow b{font:500 14px/18px var(--mono);display:block}
.irow small{font-size:13px;color:var(--muted)}
.irow .ib2{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-md);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.irow .ib2 svg{width:16px;height:16px;color:currentColor}
.icon-grid{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center}
@container cs (max-width:640px){.icon-grid{grid-template-columns:minmax(0,1fr)}}
.ilus .pv{aspect-ratio:1/1;padding:20px}
.ilus .pv svg{width:100%;height:100%}
/* movimento */
.mv-hero{background:var(--grafite);border-radius:var(--r-lg);overflow:hidden}
.mv-hero .pv{aspect-ratio:16/8;display:grid;place-items:center}
.mv-hero .pv svg{width:min(30%,260px);height:auto;color:var(--nevoa);--lg2:var(--marca-2)}
.mv-hero .bd{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:var(--cp);background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg)}
.mv-loop .pv svg{width:34%;height:auto;color:var(--lg1)}
.mv-loop .pv svg .if{fill:var(--lg2)}
.iloop .ig{transform-box:fill-box;transform-origin:62% 50%;animation:ig 4s cubic-bezier(.45,0,.2,1) infinite}
.iloop .if{transform-box:fill-box;transform-origin:50% 50%;animation:ifk 4s cubic-bezier(.45,0,.2,1) infinite}
@keyframes ig{0%,100%{transform:none}40%,60%{transform:rotate(45deg)}}
@keyframes ifk{0%,100%{transform:none}40%,60%{transform:scale(.86)}}
@media (prefers-reduced-motion:reduce){.iloop *{animation:none!important}}
.curves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@container cs (max-width:960px){.curves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container cs (max-width:560px){.curves{grid-template-columns:minmax(0,1fr)}}
.cv{display:grid;gap:10px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--cp);cursor:pointer;color:var(--ink);font:inherit}
.cv:hover{border-color:var(--ink)}
.cv h4{font:500 17px/22px var(--mono)}
.cv code{font-size:12px;color:var(--muted)}
.cv .track{position:relative;height:36px;border:1px solid var(--line);border-radius:999px}
.cv .end{position:absolute;top:8px;bottom:8px;left:84%;width:2px;background:var(--line-strong)}
.cv .dot{position:absolute;left:6px;top:5px;width:24px;height:24px;border-radius:50%;background:var(--brand);transition-property:transform}
.cv.go .dot{transform:translateX(var(--to,200px))}
@supports (corner-shape:squircle){.cv .track,.cv .dot{corner-shape:round}}
/* som */
.player{display:flex;align-items:center;gap:16px;background:var(--brand);color:var(--on-brand);border-radius:999px;padding:10px 24px 10px 10px}
.player button{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--nevoa);color:var(--marca);display:grid;place-items:center;cursor:pointer}
.player button svg{width:22px;height:22px}
.player canvas{flex:1;min-width:0;height:48px;width:100%}
.player .tm2{font:500 13px/16px var(--mono);font-variant-numeric:tabular-nums;flex:none}
@supports (corner-shape:squircle){.player,.player button{corner-shape:round}}
.estr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@container cs (max-width:640px){.estr{grid-template-columns:repeat(2,minmax(0,1fr))}}
.estr div{border-top:2px solid var(--brand);padding-top:10px;display:grid;gap:4px}
.estr b{font:500 20px/24px var(--mono)}
/* aplicações */
.capas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 16px}
@container cs (max-width:900px){.capas{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container cs (max-width:480px){.capas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.capas a{display:grid;gap:8px;justify-items:center;text-decoration:none;color:var(--ink);font:500 12px/16px var(--mono)}
.capas .cc{width:100%;aspect-ratio:1/1;border-radius:50%;background:var(--marca);display:grid;place-items:center;outline:1px solid var(--line);outline-offset:3px}
.capas .cc svg{width:42%;height:42%;color:var(--nevoa)}
@supports (corner-shape:squircle){.capas .cc{corner-shape:round}}
.redes .pv{aspect-ratio:auto;height:300px;padding:16px;background:var(--sunken);display:flex;align-items:center;justify-content:center;overflow:hidden}
.redes .pv img{height:268px;width:auto;max-width:100%;max-height:268px;object-fit:contain;border-radius:6px}
.anot{position:relative}
.note-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4)}
@container cs (max-width:640px){.note-list{grid-template-columns:minmax(0,1fr)}}
.note-list .card{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.note-list .card svg{width:24px;height:24px;color:var(--link)}
/* ===== v1.3 · Zuik: casca, bandejas e peças ===== */
/* casca: sidebar da Zuik à esquerda (≥ 64rem), Top Nav da Zuik no topo */
.shell{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh}
.shell-side{display:none}
@media (min-width:64rem){
  .shell{grid-template-columns:auto minmax(0,1fr)}
  .shell-side{display:block;position:sticky;top:0;height:100vh;height:100dvh;padding:12px 0 12px 12px;z-index:20}
}
.shell-main{min-width:0}
main#conteudo,footer.ft{container:cs/inline-size}
#zk-top{display:contents}
.top-static{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;height:var(--hdr);padding:0 16px;background:var(--canvas)}
.top-static .brand{margin-right:auto;color:var(--lg1);display:flex}
.top-static .brand svg{height:20px;width:auto}
.side-static{display:flex;flex-direction:column;gap:2px;width:256px;height:100%;overflow:auto;padding:8px;border-radius:30px;background:var(--tray);box-shadow:var(--shadow-tray)}
.side-static a{display:flex;align-items:center;min-height:36px;padding:0 13px;border-radius:9999px;color:var(--ink);text-decoration:none;font:400 14px/18px var(--mono)}
.side-static a:hover{background:var(--part)}
.side-static .ss-brand{gap:10px;min-height:44px;font-weight:500;color:var(--ink)}
.side-static .ss-brand svg{width:26px;height:26px;color:var(--lg1)}
.side-static .ss-g{margin:12px 13px 4px;font:500 12.5px/16px var(--mono);color:var(--ink-muted)}
.zk-ready .top-static{display:none}
[id]{scroll-margin-top:calc(var(--hdr) + 16px)}
.wrap{max-width:var(--max)}
@media (min-width:64rem){.wrap{padding-left:32px;padding-right:32px}}

/* tipografia de interface: rótulos em caixa normal (micro da Zuik) */
.lbl{font:500 12.5px/16px var(--mono);letter-spacing:0;text-transform:none;color:var(--ink-muted)}
.ch-h .lbl b{color:var(--ink)}
section.ch{border-bottom:0}
section.ch+section.ch{border-top:1px solid var(--divider)}

/* bandejas: brancas, flutuando, sem borda; painel de raio 30 */
.card,.tile,.sw,.stage,.lstage,.atalho,.tw,.blk,.aibox,.task,.cv,.c2card,.ib .it,ol.fontes li,.kitbox,.tm,.zdemo,details.fold,dialog.big,.fn .card,.note-list .card,.mv-hero{
  background:var(--tray);border:0;border-radius:30px;box-shadow:var(--shadow-tray)}
.atalho:hover,.task:hover,.cv:hover,.c2card:hover{border:0;background:var(--tray);box-shadow:var(--shadow-tray),0 0 0 2px var(--part-hover)}
.c2card:hover{color:var(--ink)}
ol.fontes li:target{outline:2px solid var(--focus-ring);outline-offset:0}
@supports (corner-shape:squircle){.card,.tile,.sw,.stage,.lstage,.atalho,.tw,.ib .it,.prop{corner-shape:round}}
/* bandeja com prévia: recuo 8 e a prévia como linha de raio 22 (30 = 22 + 8) */
.tile,.sw{padding:8px}
.tile .pv{border-bottom:0;border-radius:22px;background:var(--part-soft);overflow:hidden}
.tile .bd{padding:16px 16px 12px}
.sw .chip{border-radius:22px;height:152px}
.sw .bd{padding:16px 16px 12px}
.mk .pv{background:var(--part-soft)}
.dw .pv{background:var(--part-soft)}
.redes .pv,.pr .pv{background:var(--part-soft)}
.mv-hero{padding:8px}
.mv-hero .pv{border-radius:22px;background:var(--grafite)}
.mv-hero .bd{background:none;border:0;border-radius:0;padding:16px 16px 12px}
.stage{padding:8px 8px 64px}
.lstage{padding:var(--s12) var(--s6)}
.prop{border:0;border-radius:22px;box-shadow:var(--shadow-tray)}
.ap .chip{border:0;border-radius:22px;box-shadow:inset 0 0 0 1px var(--divider)}
.fn .dot{border-radius:22px}
pre.prompt{background:var(--part-soft);border-radius:22px}
dialog.big{box-shadow:var(--shadow-tray),0 30px 80px -20px rgba(0,0,0,.35)}
dialog.big .dh{border-bottom:1px solid var(--divider);background:var(--tray)}

/* tabelas: painel com fio fino entre linhas */
.tw{padding:8px}
table.t th{font:500 12.5px/16px var(--mono);letter-spacing:0;text-transform:none;color:var(--ink-muted);border-bottom:1px solid var(--divider);padding:12px 16px}
table.t td{border-bottom:1px solid var(--divider);padding:12px 16px}
@container cs (max-width:640px){
  .tw{padding:0;box-shadow:none;background:none;border-radius:0}
  table.t tr{background:var(--tray);border:0;border-radius:30px;box-shadow:var(--shadow-tray);padding:12px 20px}
  table.t td::before{font:500 12px/22px var(--mono);letter-spacing:0;text-transform:none}
}

/* peças: pílulas chapadas, sem borda, 44 (compacta 32) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border:0;border-radius:9999px;
  background:var(--part);color:var(--ink);font:500 15px/18px var(--mono);letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s,color .2s,transform .16s cubic-bezier(.2,1.3,.4,1)}
.btn:hover{background:var(--part-hover)}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn.pri{background:var(--primary);color:var(--on-primary)}
.btn.pri:hover{background:var(--primary-hover)}
.btn:focus-visible,.dl:focus-visible,.cp:focus-visible,.ib2:focus-visible{outline:0;box-shadow:0 0 0 2px var(--focus-ring)}
.toggles .btn[aria-pressed="true"],.btn[aria-pressed="true"]{background:var(--inverse);color:var(--on-inverse)}
.stage .ctl{right:16px;bottom:12px;gap:2px;padding:5px;border-radius:9999px;background:var(--tray);box-shadow:var(--shadow-tray)}
.stage .ctl .btn{height:32px;padding:0 12px;font-size:13px;line-height:16px;background:transparent}
.stage .ctl .btn:hover{background:var(--part)}
.dl{height:32px;min-height:32px;padding:0 12px 0 10px;gap:6px;border:0;border-radius:9999px;background:var(--part);color:var(--ink);font:500 13px/16px var(--mono);letter-spacing:0;text-transform:none}
.dl:hover{background:var(--part-hover);border:0}
.dl::before{width:14px;height:14px}
.cp{min-height:32px;padding:0 12px;border:0;border-radius:9999px;background:var(--part);color:var(--ink);font:500 13px/16px var(--mono);letter-spacing:0}
.cp:hover{background:var(--part-hover);border:0}
.sw .vals{display:flex;flex-wrap:wrap;gap:6px}
.irow .ib2{width:32px;height:32px;border:0;border-radius:9999px;background:var(--part);color:var(--ink)}
.irow .ib2:hover{background:var(--part-hover)}
.irow{border-bottom:1px solid var(--divider)}
.ilist{border-top:1px solid var(--divider)}

/* selos de 24 */
.badge,.selo,.st,.selo-t,.status{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border:0;border-radius:9999px;font:500 12px/14px var(--mono);letter-spacing:0;text-transform:none;white-space:nowrap}
.selo{background:var(--accent-soft);color:var(--accent-ink)}
.st{background:var(--part);color:var(--ink-muted)}
.st.pronto{background:var(--success-soft);color:var(--success-ink);border:0}
.st.parcial{background:var(--warning-soft);color:var(--warning-ink);border:0}
.st.a-fazer{background:var(--accent-soft);color:var(--accent-ink)}
.selo-t{background:var(--part);color:var(--ink-muted);border:0}
.selo-t[data-t="F"]{background:var(--accent-soft);color:var(--accent-ink);border:0}
.selo-t[data-t="P"]{background:var(--success-soft);color:var(--success-ink);border:0}
.selo-t[data-t="D"]{background:var(--part-hover);color:var(--ink)}
.selo-t[data-t="H"]{background:var(--warning-soft);color:var(--warning-ink)}
.selo-t[data-t="C"]{background:var(--inverse);color:var(--on-inverse)}
.ev{border:0;border-radius:9999px;background:var(--part);padding:1px 6px;color:var(--link)}
.ok{color:var(--success-ink)}.no{color:var(--danger-ink)}
.wrong .pv::after{background:var(--danger);font:500 18px/28px var(--mono)}

/* blocos de marca: azul clay fixo, como peça da marca */
.destaque{background:var(--marca)!important;color:var(--nevoa)!important;box-shadow:var(--shadow-tray)}
.destaque .selo-t{background:rgba(241,241,241,.16);color:var(--nevoa)}
.voz{border-radius:30px;background:var(--marca);color:var(--nevoa)}
.voz .selo-t{background:rgba(241,241,241,.16);color:var(--nevoa)}
.kitbox{color:var(--ink);padding:24px 24px 24px 28px}
.kitbox .lbl{color:var(--ink-muted);opacity:1}
.aibox{padding:24px}
.c2card{padding:20px 24px}

/* filtros com componentes Zuik */
.zfilter{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}
.zfilter>.zk-slot:has(input){flex:1 1 220px;max-width:340px}
.zk-slot:empty{min-height:54px}
.acc-flat{margin-top:8px}
.zk-acc-body{font:400 15px/24px var(--serif);color:var(--ink-muted)}
.zk-acc-body p{max-width:none}
.zk-acc-body a{display:block;padding:4px 0;font:400 13px/20px var(--mono);overflow-wrap:anywhere}
.zk-acc-body pre.prompt{color:var(--ink)}
/* sem JS: acordeões como details */
details.fold{padding:4px 8px;margin-bottom:12px}
details.fold summary{padding:12px 16px;font:500 15px/18px var(--mono)}
details.fold .in{padding:0 16px 16px}
/* teste de título */
.tester .out{border:0;border-radius:22px;background:var(--part-soft)}
/* curvas e player */
.cv .track{border:0;background:var(--part)}
.cv .end{background:var(--control-ring)}
.cv .dot{background:var(--primary)}
.player{background:var(--tray);color:var(--ink);box-shadow:var(--shadow-tray);border-radius:9999px;padding:5px 24px 5px 5px;--wave-on:var(--primary);--wave-off:var(--control-ring)}
.player button{width:44px;height:44px;background:var(--primary);color:var(--on-primary)}
.player button svg{width:18px;height:18px}
.player canvas{height:40px}
/* fios de marca: azul suave em vez de linha grossa */
.rule{border-left-color:var(--primary)}
.names div,.estr div,.jorn div{border-top:2px solid var(--primary)}
.scale i{background:var(--primary);border-radius:3px}
.radii{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.radii>div{width:auto;height:auto;border:0;display:block}
.radii .r30{padding:8px;border-radius:30px;background:var(--tray);box-shadow:var(--shadow-tray)}
.radii .r22,.radii .r30b{display:grid;place-items:center;width:120px;height:64px;border-radius:22px;background:var(--part-soft);font:500 12.5px/16px var(--mono)}
.radii .r27{padding:5px;border-radius:9999px;background:var(--tray);box-shadow:var(--shadow-tray)}
.radii .rp{display:grid;place-items:center;height:44px;padding:0 20px;border-radius:9999px;background:var(--primary);color:var(--on-primary);font:500 13px/16px var(--mono)}
.radii .r38{padding:8px;border-radius:38px;box-shadow:inset 0 0 0 1px var(--control-ring)}
.radii .r30b{border-radius:30px;background:var(--tray);box-shadow:var(--shadow-tray)}
.capas .cc{outline:0;box-shadow:var(--shadow-tray)}
.sig{border:0;border-radius:22px;box-shadow:inset 0 0 0 1px var(--divider)}
.ref .tagf{border-radius:9999px;background:var(--inverse);color:var(--on-inverse);letter-spacing:0;text-transform:none;font-size:12px}
.note-list .card svg{color:var(--primary)}

/* digital: prévias dos temas no desenho da Zuik */
.tm{padding:8px;overflow:hidden}
.tm .tm-h{border:0;padding:8px 12px 12px;font:500 12.5px/16px var(--mono);letter-spacing:0;text-transform:none}
.tm-tray{display:grid;gap:8px;padding:8px;border-radius:22px}
.tm-top{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 6px 0 16px}
.tm svg.lg{height:20px}
.tm-key{width:32px;height:32px;border-radius:9999px}
.tm-row{display:grid;gap:2px;padding:10px 16px;border-radius:22px}
.tm-row b{font:500 15px/18px var(--mono)}.tm-row span{font:400 13px/16px var(--mono)}
.tm-acts{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.tm-part,.tm-pri{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:9999px;font:500 15px/18px var(--mono)}
.tm.claro{background:#FAFAFA;color:#1F1F1F;box-shadow:0 0 0 1px rgba(31,31,31,.06),0 6px 16px -6px rgba(31,31,31,.1),0 22px 44px -24px rgba(31,31,31,.16)}
.tm.claro .tm-h{color:#575D63}.tm.claro .tm-tray{background:#FAFAFA;box-shadow:0 0 0 1px rgba(31,31,31,.06),0 6px 16px -6px rgba(31,31,31,.1)}
.tm.claro .tm-row{background:#F7F7F7}.tm.claro .tm-row span{color:#575D63}.tm.claro .tm-key,.tm.claro .tm-part{background:#F1F1F1;color:#1F1F1F}.tm.claro .tm-pri{background:var(--acc-l);color:#F1F1F1}
.tm.escuro{background:#1F1F1F;color:#F1F1F1;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 22px 44px -24px rgba(0,0,0,.6)}
.tm.escuro .tm-h{color:#ABB1B6}.tm.escuro .tm-tray{background:#2A2A2A;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 6px 16px -6px rgba(0,0,0,.45)}
.tm.escuro .tm-row{background:#333333}.tm.escuro .tm-row span{color:#ABB1B6}.tm.escuro .tm-key,.tm.escuro .tm-part{background:#383838;color:#F1F1F1}.tm.escuro .tm-pri{background:var(--acc-d);color:#1F1F1F}
.tm.claro svg.lg{color:var(--acc-l);--lg2:var(--acc-d)}.tm.escuro svg.lg{color:#F1F1F1;--lg2:#F1F1F1}
.conc-card{padding:16px;color:var(--ink)}
.conc{width:100%;height:auto;display:block}
.zgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@container cs (max-width:1100px){.zgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container cs (max-width:640px){.zgrid{grid-template-columns:minmax(0,1fr)}}
.zdemo{display:flex;flex-direction:column;padding:8px;min-width:0}
.zd-stage{display:flex;align-items:center;justify-content:center;min-height:200px;padding:24px 16px;border-radius:22px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--divider)}
.zd-stage>*{max-width:100%}
.zd-bd{display:grid;gap:4px;padding:14px 16px 10px}
.zd-bd h4{font:500 15px/18px var(--mono)}
footer.ft{background:none;border-top:1px solid var(--divider)}
.ficha dt{font:500 12.5px/22px var(--mono);letter-spacing:0;text-transform:none}
.sw .chip{letter-spacing:0;text-transform:none;font:500 12.5px/16px var(--mono)}
.prop div{letter-spacing:0}
.steps li::before{letter-spacing:0;text-transform:none;font:500 12.5px/16px var(--mono)}
table.t td::before{letter-spacing:0;text-transform:none}
.skip{border-radius:9999px;letter-spacing:0;text-transform:none;background:var(--primary);color:var(--on-primary)}
.aibox .task{box-shadow:none;background:var(--part-soft);border-radius:22px}
.aibox .task:hover{box-shadow:none;background:var(--part)}
.conc-card{padding:32px}
.anat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}
@container cs (max-width:760px){.anat{grid-template-columns:minmax(0,1fr)}}
.anat figure{margin:0;display:grid;gap:12px;justify-items:start}
.anat figcaption{font:400 13px/18px var(--mono);color:var(--ink-muted)}
.anat figcaption b{font-weight:500;color:var(--ink)}
.a-panel{display:flex;flex-direction:column;gap:8px;padding:8px;width:100%;max-width:340px;border-radius:30px;background:var(--tray);box-shadow:var(--shadow-tray);outline:1px dashed var(--link);outline-offset:-8px}
.a-row{display:grid;gap:2px;padding:10px 16px;border-radius:22px;background:var(--part-soft)}
.a-row b{font:500 15px/18px var(--mono)}.a-row span{font:400 13px/16px var(--mono);color:var(--ink-muted)}
.a-bar{display:flex;gap:2px;padding:5px;border-radius:9999px;background:var(--tray);box-shadow:var(--shadow-tray);outline:1px dashed var(--link);outline-offset:-5px;max-width:100%}
.a-bar>span{display:inline-flex;align-items:center;height:44px;border-radius:9999px;font:500 15px/18px var(--mono);white-space:nowrap}
.a-ic{width:44px;justify-content:center;background:var(--part)}
.a-ic svg,.a-icn svg{width:18px;height:18px}
.a-pri{padding:0 16px;background:var(--primary);color:var(--on-primary)}
.a-part{padding:0 16px;background:var(--part)}
.a-field{display:flex;align-items:center;gap:8px;height:44px;width:100%;max-width:340px;padding:0 10px 0 13px;border-radius:9999px;background:var(--part);font:400 15px/18px var(--mono);color:var(--ink-muted);}
.a-field>span:nth-child(2){flex:1}
.a-icn{display:inline-flex;color:var(--ink-muted)}
.a-key{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:9999px;background:var(--part-hover);font:500 14px/1 var(--mono)}
@media print{
  .shell{display:block!important}
  .shell-side,#zk-top>*,.zk-layer,.top-static{display:none!important}
  .card,.tile,.sw,.blk,.tw,.zdemo,.tm,details.fold{box-shadow:0 0 0 1px rgba(31,31,31,.12)!important}
}

/* ===== v1.4 · refinamento: estabilidade, microinterações e feedback ===== */
body{overflow-x:clip}
img,svg,video,canvas{max-width:100%}
/* iOS amplia a página quando o campo tem menos de 16 px: o texto dos campos sobe para 16 no toque */
@media (pointer:coarse){.zk-root input,.zk-root textarea,.zk-layer input,.zk-layer textarea{font-size:16px!important}}
/* transição suave ao trocar o tema */
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
/* toque e foco em tudo que é clicável */
.dl,.cp,.ib2,.atalho,.c2card,.task,.cv,.capas a,.toggles .btn{transition:background-color .2s,color .2s,box-shadow .2s,transform .16s cubic-bezier(.2,1.3,.4,1)}
.dl:active,.cp:active,.ib2:active{transform:scale(.94)}
.atalho:active,.c2card:active,.task:active,.cv:active{transform:scale(.985)}
.atalho:focus-visible,.c2card:focus-visible,.task:focus-visible,.cv:focus-visible,.capas a:focus-visible{outline:0;box-shadow:var(--shadow-tray),0 0 0 3px var(--focus-ring)}
.c2card>span[aria-hidden]{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.c2card:hover>span[aria-hidden]{transform:translateX(4px)}
.atalho svg{transition:transform .25s cubic-bezier(.2,1.3,.4,1)}
.atalho:hover svg{transform:translateY(-2px)}
/* copiar: confirmação no próprio botão */
.cp{display:inline-flex;align-items:center;gap:6px;justify-content:center}
.cp svg,.dl svg{width:14px;height:14px;flex:none}
.cp[data-done],.ib2[data-done]{background:var(--success-soft);color:var(--success-ink)}
.ib2 svg{width:16px;height:16px}
.ib2[data-done] svg,.cp[data-done] svg{animation:pop .3s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.task[data-done]{background:var(--success-soft)!important}
.task[data-done] .small{color:var(--success-ink)}
/* download: preenchimento real do progresso e confirmação */
.dl[data-busy]{background:linear-gradient(90deg,var(--accent-soft) calc(var(--p,0)*100%),var(--part) 0);cursor:progress}
.dl[data-busy]::before{animation:nudge .9s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(2px)}}
.dl[data-done]{background:var(--success-soft);color:var(--success-ink)}
.dl[data-done]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");animation:pop .3s cubic-bezier(.2,1.3,.4,1)}
.capas a[data-busy] .cc{animation:breathe 1s ease-in-out infinite}
.capas a[data-done] .cc{box-shadow:var(--shadow-tray),0 0 0 3px var(--success)}
@keyframes breathe{50%{transform:scale(.94);opacity:.75}}
.capas .cc{transition:transform .25s cubic-bezier(.2,1.3,.4,1),box-shadow .2s}
.capas a:hover .cc{transform:translateY(-3px)}
/* filtros: contagem viva e estado vazio */
.fcount{margin:0 0 0 auto;font:500 12.5px/16px var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.bump{animation:bump .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes bump{40%{transform:scale(1.12);color:var(--link)}}
.fempty{margin:16px 0 0;padding:16px 20px;border-radius:22px;background:var(--part-soft);font:400 15px/22px var(--serif);color:var(--ink-muted)}
.dw.pop{animation:tileIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes tileIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
/* link de seção */
.sub>h3{display:flex;align-items:center;gap:8px}
.sub>h3 .anchor{opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s cubic-bezier(.2,1.3,.4,1),background-color .2s}
.sub>h3:hover .anchor,.sub>h3 .anchor:focus-visible,.sub>h3 .anchor[data-done]{opacity:1;transform:none}
@media (hover:none){.sub>h3 .anchor{opacity:.55;transform:none}}
/* destino de navegação: o título acende por um instante */
.zk-target>.wrap>.ch-h h2,.zk-target>h3{animation:hl 1.4s ease}
@keyframes hl{0%,30%{color:var(--link)}}
.zk-target>h3{border-radius:12px}
/* cartões de prévia: a imagem responde ao mouse */
.tile .pv>svg,.tile .pv>img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.tile:hover .pv>svg,.tile:hover .pv>img{transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.bump,.dw.pop,.zk-target *,.capas a *,.dl::before{animation:none!important}.tile:hover .pv>*{transform:none!important}}
/* celular: espaço para a pílula de capítulos */
@media (max-width:63.99rem){footer.ft{padding-bottom:calc(var(--s12) + 96px)}}
.ib2{display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:9999px;background:var(--part);color:var(--ink);cursor:pointer;flex:none}.ib2:hover{background:var(--part-hover)}.sub>h3 .anchor{width:28px;height:28px}
/* celular: tabelas viram fichas compactas; grades de miniaturas em duas colunas */
@container cs (max-width:640px){
  .g4:not(.one){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .g4:not(.one) .tile .bd{padding:12px 10px 8px}
  .g4:not(.one) .tile .bd h4{font-size:14px;line-height:18px}
  .g4:not(.one) .tile .bd .small{font-size:13px;line-height:18px}
  table.t tr{padding:14px 18px 12px;margin-bottom:10px;border-radius:22px}
  table.t td{display:block;padding:4px 0}
  table.t td::before{display:block;margin-bottom:2px;font:500 11.5px/16px var(--mono)}
  table.t td:first-child{font:500 15px/20px var(--mono);padding:0 0 6px}
  table.t td:first-child::before{display:none}
  .card table.t tr,.tw .tw table.t tr,.zk-acc-body table.t tr{box-shadow:none;background:var(--part-soft)}
  .card .tw{margin:0 -8px}
  .fmt svg{max-height:440px;width:auto;margin:0 auto;display:block}
  .ilist{gap:8px 12px}
  .zfilter{gap:10px}
}
.zk-acc-body .tw{box-shadow:none;padding:0;background:none}
[hidden]{display:none!important}
@container cs (max-width:640px){
  table.t td{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:baseline;padding:3px 0}
  table.t td::before{margin:0;font:500 11.5px/18px var(--mono)}
  table.t td:first-child{display:block}
}
.destaque,.destaque *,.voz,.voz *{--on-brand:var(--nevoa)}
.destaque .why,.destaque .lbl,.destaque p,.destaque h3,.voz .lbl,.voz p,.voz h3{color:var(--nevoa)!important}
.destaque .why{border-color:rgba(241,241,241,.28)!important;opacity:.92}
.destaque .ev,.voz .ev{background:rgba(241,241,241,.18);color:var(--nevoa)}
.icon-grid>svg,.icon-grid>div:first-child svg{max-width:200px;height:auto;margin:0 auto;display:block}

/* v1.5: download = pílula com botão circular de ícone dentro (concentricidade Zuik: 32 = 24 + 4 + 4) */
.dl{--dl-c:%231F1F1F;--dl-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1F1F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M6 11l6 6 6-6M4 21h16'/%3E%3C/svg%3E");--dl-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1F1F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.dark .dl,:root[data-theme="dark"] .dl{--dl-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1F1F1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M6 11l6 6 6-6M4 21h16'/%3E%3C/svg%3E");--dl-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1F1F1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.light .dl,:root[data-theme="light"] .dl{--dl-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1F1F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M6 11l6 6 6-6M4 21h16'/%3E%3C/svg%3E")}
.dl{padding:0 14px 0 4px;gap:8px}
.dl::before,.dl[data-done]::before{width:24px;height:24px;border-radius:50%;background:var(--dl-ic) center/12px no-repeat,var(--part-hover);-webkit-mask:none;mask:none;transition:background-color .2s}
.dl:hover::before{background-color:var(--divider)}
.dl[data-done]::before{background:var(--dl-ok) center/12px no-repeat,var(--success-soft)}
.dl[data-busy]::before{background-color:var(--part)}
.dl,.cp,.btn,.ib2,.atalho .ic,.zdemo .btn{corner-shape:round}

.zk-acc-body .rv,.zk-acc-body .rv *{opacity:1!important;transform:none!important;transition:none!important}

/* proporção interativa */
.pcomp{display:grid;gap:16px}
.pbar-h{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.pmode{display:inline-flex;gap:4px;padding:4px;background:var(--part);border-radius:9999px}
.pm{height:32px;padding:0 14px;border:0;border-radius:9999px;background:transparent;color:var(--ink);font:500 13px/16px var(--mono);cursor:pointer;transition:background-color .2s,color .2s}
.pm[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}
.pm:focus-visible,.pseg:focus-visible{outline:0;box-shadow:0 0 0 3px var(--focus-ring)}
.pbar{display:flex;gap:6px;height:112px;padding:6px;background:var(--surface);border-radius:30px;box-shadow:var(--shadow-tray)}
.pseg{flex-basis:0;min-width:0;border:0;border-radius:24px;background:var(--bg);color:var(--fg);padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;cursor:pointer;text-align:left;font:500 12px/14px var(--mono);box-shadow:inset 0 0 0 1px var(--divider);transition:flex-grow .45s cubic-bezier(.2,1.1,.3,1),transform .2s,box-shadow .2s}
.pseg .pn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pseg .pp{font:600 20px/22px var(--mono)}
.pseg:hover{transform:translateY(-3px)}
.pseg[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--divider),0 0 0 3px var(--focus-ring)}
.pdet{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:24px;align-items:center;background:var(--surface);border-radius:30px;box-shadow:var(--shadow-tray);padding:20px}
@container cs (max-width:640px){.pdet{grid-template-columns:minmax(0,1fr)}}
.pmock{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--divider);--c-nv:#F1F1F1;--c-gf:#1F1F1F;--c-cl:var(--marca);--c-ag:var(--marca-2)}
.pmock i{position:absolute;display:block;transition:background-color .35s,box-shadow .25s,opacity .25s;box-shadow:0 0 0 0 transparent}
.pmock .m-bg{inset:0;background:var(--c-nv)}
.pmock .m-head{left:0;right:0;top:0;height:30%;background:var(--c-cl)}
.pmock .m-tx{left:10%;right:30%;top:42%;height:7%;border-radius:9999px;background:var(--c-gf)}
.pmock .m-tx2{left:10%;right:45%;top:54%;height:5%;border-radius:9999px;background:var(--c-gf);opacity:.7}
.pmock .m-btn{left:10%;width:42%;bottom:10%;height:10%;border-radius:9999px;background:var(--c-cl)}
.pmock .m-dot{right:10%;bottom:10%;width:10%;aspect-ratio:1;border-radius:50%;background:var(--c-ag)}
.pmock[data-sel="0"] .m-bg,.pmock[data-sel="1"] .m-tx,.pmock[data-sel="1"] .m-tx2,.pmock[data-sel="2"] .m-head,.pmock[data-sel="2"] .m-btn,.pmock[data-sel="3"] .m-dot{box-shadow:0 0 0 3px var(--focus-ring)}
.pmock.dk[data-sel="0"] .m-bg,.pmock.dk[data-sel="0"] .m-tx,.pmock.dk[data-sel="0"] .m-tx2{box-shadow:0 0 0 3px var(--focus-ring)}
.pmock.dk[data-sel="1"] .m-tx,.pmock.dk[data-sel="1"] .m-tx2{box-shadow:none}
.pmock.dk[data-sel="1"] .m-bg{box-shadow:0 0 0 3px var(--focus-ring)}
.pmock.dk .m-bg{background:var(--c-gf)}.pmock.dk .m-tx,.pmock.dk .m-tx2{background:var(--c-nv)}
.pmock.dk .m-head{background:var(--c-cl)}
.ptx{display:grid;gap:8px;justify-items:start}
.ptx h4{margin:0}.ptx .pd{margin:0}
.pdl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:4px 0 8px;font-size:14px;line-height:22px}
.pdl dt{font:500 12px/22px var(--mono);text-transform:uppercase;color:var(--muted)}.pdl dd{margin:0}
@media (prefers-reduced-motion:reduce){.pseg,.pmock i{transition:none}}

/* teste de título v2 */
.tt-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
@container cs (max-width:900px){.tt-g{grid-template-columns:minmax(0,1fr)}}
.tt-ctl{display:grid;gap:16px}
.tt-pre{display:grid;gap:8px}.tt-chips{display:flex;flex-wrap:wrap;gap:8px}
.tt-m{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.tt-m>div{background:var(--part-soft);border-radius:22px;padding:12px 14px}
.tt-m dt{font:500 11px/14px var(--mono);text-transform:uppercase;color:var(--muted)}
.tt-m dd{margin:4px 0 0;font:600 22px/26px var(--mono)}
.tt-s{margin:0;padding:10px 14px;border-radius:9999px;background:var(--part-soft)}
.tt-s[data-k=ok]{background:var(--success-soft);color:var(--success-ink)}
.tt-s[data-k=warn]{background:var(--accent-soft);color:var(--accent-ink)}
.tt-s[data-k=bad]{background:var(--error-soft,rgba(220,60,50,.16));color:var(--error,#c0392b)}
.tt-pv{display:grid;gap:10px;justify-items:center}
.tt-frame{width:100%;background:var(--sunken,var(--part-soft));border-radius:26px;padding:8px;box-shadow:inset 0 0 0 1px var(--divider);transition:width .45s cubic-bezier(.2,1.1,.3,1),border-radius .3s}
.tt-bar{display:flex;align-items:center;gap:6px;padding:6px 10px 10px}
.tt-bar i{width:9px;height:9px;border-radius:50%;background:var(--control-ring,rgba(128,128,128,.4))}
.tt-bar span{margin-left:8px;flex:1;text-align:center;font:500 11px/16px var(--mono);color:var(--muted);background:var(--part);border-radius:9999px;padding:2px 10px}
.tt-frame .out{border:0;border-radius:20px;background:var(--surface);padding:28px;min-height:220px;overflow-wrap:anywhere;box-shadow:var(--shadow-tray)}
.tt-frame .out h2{font-size:36px;line-height:1.15;margin:10px 0;transition:font-size .3s}
.tt-frame .out .tt-lead{margin:0;color:var(--muted)}
.tt-frame[data-m=m]{width:min(100%,340px);border-radius:38px}
.tt-frame[data-m=m] .out{padding:20px;border-radius:30px;min-height:300px}
.tt-frame[data-m=m] .out h2{font-size:26px}
.tt-frame[data-m=m] .tt-bar i{display:none}
.tt-spec{margin:0;text-align:center}

/* v1.5: ícones em fichas (cada ícone com o seu fundo e os seus botões) */
.ilist{border-top:0;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
@container cs (max-width:1000px){.ilist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container cs (max-width:620px){.ilist{grid-template-columns:minmax(0,1fr)}}
.irow{grid-template-columns:44px minmax(0,1fr) auto auto;gap:6px;padding:8px 10px 8px 8px;border:0;border-bottom:0;border-radius:9999px;background:var(--surface);box-shadow:var(--shadow-tray)}
.irow>svg{box-sizing:content-box;width:20px;height:20px;padding:12px;border-radius:50%;background:var(--part);color:var(--primary)}
.irow>div{padding-left:6px;min-width:0}
.irow b,.irow small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.irow:hover>svg{background:var(--accent-soft)}
/* avisos de regra: ícone no círculo, alinhado ao texto */
.note-list .card{display:flex;align-items:center;gap:14px;padding:16px 20px 16px 16px}
.note-list .card>svg{box-sizing:content-box;flex:none;width:20px;height:20px;padding:8px;border-radius:50%;background:var(--part);color:var(--primary)}
.note-list .card>p{margin:0}

/* introdução longa de capítulo: duas colunas em vez de uma faixa estreita com vazio ao lado */
@container cs (min-width:900px){.ch-intro.long{max-width:none;column-count:2;column-gap:48px;font-size:17px;line-height:27px}}
@container cs (min-width:900px){.ch-intro:not(.long){max-width:82ch}}

.tt-ctl .justify-center{justify-content:flex-start}

/* explorador do kit */
.kitx{margin-top:16px}
.kbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.ks{display:flex;align-items:center;gap:10px;flex:1 1 280px;max-width:420px;height:48px;padding:0 18px;border-radius:9999px;background:var(--surface);box-shadow:var(--shadow-tray);color:var(--muted)}
.ks svg{width:18px;height:18px;flex:none}
.ks input,.kd-bar input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 16px/24px var(--mono);outline:0}
.ks:focus-within,.kd-bar:focus-within{box-shadow:var(--shadow-tray),0 0 0 3px var(--focus-ring)}
.kchips{display:flex;flex-wrap:wrap;gap:6px}
.kchip{height:36px;padding:0 14px;border:0;border-radius:9999px;background:var(--part);color:var(--ink);font:500 13px/16px var(--mono);cursor:pointer;transition:background-color .2s,transform .16s cubic-bezier(.2,1.3,.4,1)}
.kchip:hover{background:var(--part-hover)}.kchip:active{transform:scale(.96)}
.kchip[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}
.kchip:focus-visible,.kcard:focus-visible{outline:0;box-shadow:0 0 0 3px var(--focus-ring)}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.kcard{position:relative;display:flex;flex-direction:column;gap:12px;padding:8px 8px 18px;border:0;border-radius:30px;background:var(--surface);box-shadow:var(--shadow-tray);color:var(--ink);text-align:left;cursor:pointer;font:inherit;transition:transform .2s cubic-bezier(.2,1.3,.4,1),box-shadow .2s}
.kcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-tray),0 0 0 2px var(--part-hover)}
.kcard:active{transform:scale(.98)}
.kc{display:grid;place-items:center;height:150px;border-radius:22px;background:var(--part-soft);overflow:hidden}
.kc img{max-width:78%;max-height:78%;object-fit:contain}
.kc-cores{grid-auto-flow:column;gap:0;place-items:stretch}.kc-cores i{display:block}
.kc-tipo b{font:500 56px/1 var(--mono)}
.kc-g b{display:grid;place-items:center;min-width:72px;height:72px;padding:0 14px;border-radius:9999px;background:var(--surface);box-shadow:var(--shadow-tray);font:600 16px/1 var(--mono);color:var(--primary)}
.kb{display:grid;gap:4px;padding:0 12px}
.kb b{font:500 17px/22px var(--mono)}
.kb .lbl{text-transform:none}
.kmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.kfm{font:500 11px/16px var(--mono);color:var(--muted)}
.kgo{position:absolute;right:16px;bottom:14px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--part);transition:background-color .2s,transform .2s}
.kcard:hover .kgo{background:var(--primary);color:var(--on-primary);transform:translateX(2px)}
.kcount{margin:0 0 8px}.kempty{padding:24px;text-align:center;color:var(--muted)}
/* janela de arquivos */
.kdlg{width:min(860px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;overflow:hidden;display:none;flex-direction:column}
.kdlg[open]{display:flex}
.kdlg .dh{align-items:flex-start;padding:20px 20px 8px}
.kdlg h4{margin:4px 0;font:500 22px/28px var(--mono)}.kdlg .dh p{margin:0}
.kd-bar{display:flex;align-items:center;gap:12px;margin:8px 20px 12px;padding:0 18px;height:44px;border-radius:9999px;background:var(--part)}
.kl{list-style:none;margin:0;padding:0 12px 16px;overflow:auto;display:grid;gap:6px;align-content:start}
.kgh{padding:14px 10px 4px;font:500 12px/16px var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.kr{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:26px;background:var(--part-soft)}
.kt{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:inset 0 0 0 1px var(--divider)}
.kt img{max-width:80%;max-height:80%;object-fit:contain}
.kt-g b{font:600 12px/1 var(--mono);color:var(--primary)}
.kn{min-width:0;display:grid;gap:2px}
.kn b{font:500 14px/18px var(--mono);overflow-wrap:anywhere}.kn small{font-size:12px;color:var(--muted)}
.kf{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.kf .dl small{font:400 11px/1 var(--mono);color:var(--muted);margin-left:2px}
@media (max-width:640px){.kr{grid-template-columns:48px minmax(0,1fr)}.kf{grid-column:1/-1;justify-content:flex-start}.kt{width:48px;height:48px}.kdlg{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}}

.hist-w{margin-top:16px}

.chart-card{display:flex;flex-direction:column}
.chart-card svg{width:100%;height:auto;margin:auto 0}
.chart-src{margin:0;padding-top:12px;border-top:1px solid var(--divider)}

/* concêntrico: tabela dentro de cartão = cartão 30 · respiro 8 · tabela 22 */
.card:has(>.tw){padding:8px}
.card:has(>.tw)>.lbl{padding:10px 14px 8px;margin:0}
.card>.tw{padding:0;border:0;border-radius:22px;background:var(--part-soft);box-shadow:none}
.card>.tw table{border-radius:22px}
.card>.tw th:first-child,.card>.tw td:first-child{padding-left:20px}
@media (max-width:640px){.card .tw{margin:0}}

.anat .a-field{margin-top:0}
.a-cota{display:flex;align-items:flex-start;width:88px;margin-top:-4px;color:var(--link);font:500 11px/14px var(--mono)}
.a-cota span{position:relative;text-align:center;padding-top:6px;border-top:1px solid var(--link);min-width:0}
.a-cota span::before,.a-cota span::after{content:"";position:absolute;top:-4px;width:1px;height:8px;background:var(--link)}
.a-cota span::before{left:0}.a-cota span:last-of-type::after{right:0}
.a-cota em{font-style:normal;margin-left:12px;color:var(--ink-muted);font-weight:400;white-space:nowrap;padding-top:6px}

/* cota da peça: larguras fixas (2×) */
.a-cota{width:auto}
.a-cota span:nth-child(1),.a-cota span:nth-child(3){width:26px;flex:none}.a-cota span:nth-child(2){width:36px;flex:none}
/* prévias nunca cortam o logotipo: a imagem se ajusta à caixa em qualquer largura */
.tile .pv>img[style]{width:100%;height:100%!important;max-height:none;max-width:100%;object-fit:contain;min-height:0}
@container cs (max-width:640px){.tile .pv{padding:14px}}

/* cores de apoio: cada cor em um cartão com respiro */
.ap{gap:16px}
.apc{display:flex;flex-direction:column;padding:8px;border-radius:30px;background:var(--surface);box-shadow:var(--shadow-tray);min-width:0}
.apc .chip{height:72px;border-radius:22px}
.apc .bd{display:grid;gap:10px;justify-items:start;padding:14px 12px 10px}
.apc .bd b{font:500 14px/18px var(--mono)}
.apc .bd p{margin:0}

/* cores funcionais: cartão compacto, cor em cima, dados embaixo */
.fn{gap:12px}
.fn .fcard{display:flex;flex-direction:column;gap:0;padding:8px}
.fn .fcard .dot{height:48px;border-radius:22px}
.fn .fcard .bd{display:grid;gap:8px;padding:12px 10px 8px}
.fn .fcard .hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fn .fcard h4{margin:0;font:500 15px/20px var(--mono)}
.fn .fcard .vals{display:flex;flex-wrap:wrap;gap:6px}
.fn .fcard .cp{height:28px;min-height:28px;padding:0 10px;font-size:12px}
.fn .fcard p{margin:0;font-size:13px;line-height:19px}
@container cs (max-width:520px){.fn{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fn .fcard .dot{height:36px}.fn .fcard .hd{flex-wrap:wrap}}

html,html.dark,html.light{color:var(--ink)}

/* celular: o palco da capa não define a largura; filtros com rótulos rolam dentro da própria linha */
@container cs (max-width:900px){.hero .stage{min-height:0;aspect-ratio:1/1;max-width:100%}}
.zfilter{max-width:100%;min-width:0}
.zfilter .zk-slot{max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none;border-radius:9999px}
.zfilter .zk-slot::-webkit-scrollbar{display:none}

/* mockups com fundo cinza próprio: a caixa ganha o mesmo cinza, sem faixas de outra cor em cima e embaixo */
.pv:has(>svg[viewBox="0 0 640 400"]),.pv:has(>svg[viewBox="0 0 640 360"]){background:#DBDBDB}
.pv>svg[viewBox="0 0 640 400"],.pv>svg[viewBox="0 0 640 360"]{width:100%;height:100%;max-width:none;max-height:none}

/* kit: bandeja 30 · respiro 8 · painel 22 e botão de 44 (raio 22): concêntrico */
.kitbox{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:30px}
.kitbox>div:first-child{padding:20px 22px;border-radius:22px;background:var(--part-soft)}
.kitbox>.zk-slot,.kitbox>div+div{width:100%}
.kitbox .zk-slot>*,.kitbox .zk-slot button,.kitbox .zk-slot a{width:100%;justify-content:center}
.kitbox{align-items:stretch;text-align:left}
.kitbox>div:first-child{width:auto}
.kitbox>.zk-slot{display:flex}
.kitbox>.zk-slot>*{flex:1 1 auto;display:flex;justify-content:center}
.kitbox>.zk-slot>*>*{flex:1 1 auto}

/* filtros por categoria: a barra tem largura definida (cabe o rótulo da aba escolhida) e fica à esquerda */
.zfilter>.zk-slot:first-child{flex:0 1 auto;width:min(100%,430px)}

/* anatomia: Painel ocupa a coluna esquerda inteira; Peça com ampliação 2× */
@container cs (min-width:761px){.anat>figure:first-child{grid-row:span 2}}
.anat>figure:first-child .a-panel{max-width:none}
.a-peca{max-width:100%}
.a-zoom{display:grid;gap:6px;width:100%}
.a-hz{display:flex;align-items:flex-end;margin-left:30px;color:var(--link);font:500 11px/14px var(--mono)}
.a-hz span{display:block;text-align:center;border-bottom:1px solid var(--link);padding-bottom:4px;box-sizing:border-box;position:relative}
.a-hz span::before,.a-hz span::after{content:"";position:absolute;bottom:-4px;width:1px;height:8px;background:var(--link)}
.a-hz span::before{left:0}.a-hz span::after{display:none}.a-hz span:nth-child(2)::after{display:block;right:0}
.a-hz em{font-style:normal;color:var(--ink-muted);font-weight:400;margin-left:14px;white-space:nowrap}
.a-zr{display:flex;gap:6px;align-items:flex-start}
.a-vz{display:flex;flex-direction:column;width:24px;color:var(--link);font:500 11px/14px var(--mono)}
.a-vz span{display:grid;place-items:center;border-right:1px solid var(--link);position:relative;box-sizing:border-box;padding-right:4px}
.a-vz span::before{content:"";position:absolute;right:-4px;top:0;width:8px;height:1px;background:var(--link)}
.a-vz span:last-child::after{content:"";position:absolute;right:-4px;bottom:0;width:8px;height:1px;background:var(--link)}
.a-field.a-f2{height:88px;padding:0 20px 0 26px;gap:16px;font-size:28px;line-height:34px;flex:1;min-width:0;max-width:none;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent);outline:1px dashed var(--link);outline-offset:-26px;border-radius:9999px 0 0 9999px}
.a-f2 .a-icn svg{width:36px;height:36px}
.a-f2 span:nth-child(2){flex:none;white-space:nowrap}
.a-peca>.a-field{max-width:340px}
/* setas: ícone SVG centrado no círculo */
.kgo,.c2card>span[aria-hidden]{display:grid;place-items:center;line-height:0}
.kgo svg,.c2card>span[aria-hidden] svg{width:18px;height:18px;display:block}
.c2card>span[aria-hidden]{width:44px;height:44px;border-radius:50%;background:var(--brand);color:var(--on-brand)}
/* kit: botão pílula de 44 no topo-direita da bandeja, recuo 8 (22 + 8 = 30) */
.kitbox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
.kitbox>.zk-slot{display:block;width:auto}
.kitbox .zk-slot>*,.kitbox .zk-slot button,.kitbox .zk-slot a{width:auto;flex:none}
.kitbox>.zk-slot>*{flex:none}
@container cs (max-width:640px){.kitbox{grid-template-columns:minmax(0,1fr)}.kitbox .zk-slot>*,.kitbox .zk-slot button,.kitbox .zk-slot a{width:100%;justify-content:center}}

/* prévias que preenchem toda a área, sem cantos quadrados */
.kc-full img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center}
.kc img{object-position:center}
.hist-w .card{columns:2 360px;column-gap:32px}
.hist-w .card>p{break-inside:avoid;margin-top:0}
.hist-w .card>.lbl{column-span:all}
/* Marca para IA: bandeja 30 / recuo 8 / painel 22; botão pílula no topo-direita (22 + 8 = 30) */
.aibox{padding:8px;gap:8px;border-radius:30px;border:0}
.aibox>div:first-child{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px!important;align-items:start!important;justify-content:stretch!important}
.aibox>div:first-child>p{max-width:none!important;margin:0;padding:20px 22px;border-radius:22px;background:var(--part-soft)}
.aibox>div:first-child .zk-slot>*{flex:none}
@container cs (max-width:640px){.aibox>div:first-child{grid-template-columns:minmax(0,1fr)}.aibox>div:first-child .zk-slot>*,.aibox>div:first-child button{width:100%;justify-content:center}}
.hist-w .card>.lbl,.hist-w .card>h4{column-span:all}
@container cs (min-width:761px){.anat>figure:first-child{align-self:stretch;grid-template-rows:1fr auto}.anat>figure:first-child .a-panel{height:100%}.anat>figure:first-child .a-row{flex:1;align-content:center}}
.kc-mo{background:#F1F1F1}.kc-mo img{object-fit:contain!important}
.hist-w .card>.lbl{margin-bottom:12px}
/* estado ativo sempre legível: fundo e texto do par invertido, em qualquer contêiner */
.btn[aria-pressed="true"],.ctl .btn[aria-pressed="true"],.mv-ctl .btn[aria-pressed="true"],.toggles .btn[aria-pressed="true"]{background:var(--inverse)!important;color:var(--on-inverse)!important;border-color:transparent}

/* card com painel interno concêntrico (bandeja 30 / recuo 8 / painel 22) */
.card-in{display:flex;flex-direction:column}
.card-in>.cb{flex:1;display:flex;flex-direction:column;gap:14px;padding:22px 24px;border-radius:22px;background:var(--part-soft)}
.card-in>.cb>*{margin:0}
.card-in>.cb .dls{margin-top:auto}
/* sem painel cinza mais claro atrás do texto; texto afastado da borda; pílulas concêntricas */
.aibox>div:first-child>p{background:none!important;padding:14px 22px}
.kitbox>div:first-child{background:none!important;padding:14px 22px}
.aibox>.steps{padding:6px 22px 4px}
.aibox>.dls{gap:8px}

/* prévia inteira, sem cortar: imagem contida e fundo desfocado da própria imagem preenchendo o resto */
.kc{position:relative;isolation:isolate}
.kc[style*="--bg"]::before{content:"";position:absolute;inset:-24px;z-index:-1;background:var(--bg) center/cover;filter:blur(22px) saturate(1.1);opacity:.9}
.kc-full img,.kc-mo img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain!important}
.kc-mo{background:none}
.kc img{max-width:92%;max-height:92%}
.kc-full img{max-width:100%;max-height:100%}
.hist-w .card{columns:auto}

.kc-full img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain!important}
.kc-full img{position:absolute;inset:0;width:100%;height:100%}
.hist-w .card p{max-width:none;margin:0 0 12px}
.hist-w .card>.lbl{margin-bottom:14px}
/* número do capítulo no celular: do tamanho do bloco de texto, alinhado embaixo */
@media (max-width:640px){.ch-h{column-gap:16px;align-items:stretch}.ch-n{align-self:end;font-size:clamp(76px,22vw,92px);line-height:.72;-webkit-text-stroke-width:1.2px;padding-bottom:4px}}

/* tabelas viram cartões no celular: título em cima, rótulo e valor alinhados pela mesma linha */
@media (max-width:640px){
.tw table.t tr{padding:16px 18px;margin-bottom:10px;border-radius:22px}
.tw table.t td{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:start;padding:4px 0;font-size:15px;line-height:22px}
.tw table.t td::before{display:block;margin:0;font:500 11.5px/22px var(--mono);letter-spacing:0;text-transform:none;color:var(--ink-muted)}
.tw table.t td:first-child{display:block;font:500 15px/20px var(--mono);padding:0 0 8px}
.tw table.t td:first-child::before{display:none}
.tw table.t td[data-l="Dado"],.tw table.t td[data-l="Valor"],.tw table.t td[data-l="Item"]{display:block}
.tw table.t td[data-l="Dado"]::before,.tw table.t td[data-l="Valor"]::before,.tw table.t td[data-l="Item"]::before{display:none}
}

.swv{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.swv i{display:block;flex:none;width:16px;height:16px;border-radius:50%;border:1px solid var(--divider)}

/* amostra do contraste: selo do tamanho do texto, não largura total */
.tw table.t td>span[style*="border-radius:9999px"]{justify-self:start;align-self:start;width:fit-content}
/* teste de título: sem sombra forte na tela interna */
.tt-frame .out{box-shadow:inset 0 0 0 1px var(--divider)}
/* tabela dentro de cartão no celular: linhas sem painel, com respiro nas bordas */
@media (max-width:640px){
.card:has(>.tw)>.lbl{padding:8px 12px 2px}
.card>.tw{padding:0 12px 4px}
.card .tw table.t tr,.zk-acc-body .tw table.t tr{background:none!important;box-shadow:none!important;border-radius:0;margin:0;padding:14px 0;border-bottom:1px solid var(--divider)}
.card .tw table.t tr:last-child{border-bottom:0}
.tw table.t td[data-l="Regra"]{display:block}
.tw table.t td[data-l="Regra"]::before{display:none}
}
.ilist{row-gap:8px}
/* cartões de movimento: controles numa barra-pílula (44 + 5 = 27), tudo alinhado à esquerda com o mesmo recuo */
.mv-ctl{display:inline-flex;flex-wrap:nowrap;gap:2px;padding:5px;border-radius:9999px;background:var(--part-soft);width:fit-content;max-width:100%}
.mv-ctl .btn{height:44px;padding:0 20px;border-radius:9999px;border:0;background:var(--part);font:500 14px/18px var(--mono)}
.mv-card .bd,.mv-hero .bd{display:grid;gap:16px;justify-items:start;align-content:start;padding:18px 20px 20px}
.mv-card .bd>*,.mv-hero .bd>*{margin:0;max-width:100%}
.mv-hero .bd>div{justify-items:start!important;display:grid;gap:12px;width:100%}
.mv-hero .bd .mv-ctl{justify-self:start}
.mv-card .dls,.mv-hero .dls{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
@media (min-width:901px){.mv-hero .bd{grid-template-columns:minmax(0,1fr) auto;align-items:center}.mv-hero .bd>div:last-child{justify-items:end!important;width:auto}.mv-hero .dls{justify-content:flex-end}}
/* anatomia no celular: painel e barra centralizados com a legenda */
@media (max-width:760px){.anat>figure:nth-child(-n+2){justify-items:center;text-align:center}.anat .a-panel{max-width:100%}.a-bar{justify-content:center}}
@media (max-width:760px){.anat .a-row{text-align:left}}
@media (max-width:640px){.tw table.t td>*{justify-self:start;width:fit-content;max-width:100%}}
/* sobre fotos e fundos: o fundo de cada exemplo é fixo, não muda com o tema */
#logo-fundos .pv{background-image:none}
#logo-fundos .pv.bg-nv{background:#F1F1F1!important}
#logo-fundos .pv.bg-cl{background:var(--acc-l)!important}
#logo-fundos .pv.bg-gr{background:#1F1F1F!important}
#logo-fundos .pv.bg-foto{background:linear-gradient(135deg,#1c2a3a,#3a2f2a 55%,#16212c)!important}
/* kit: botão em largura total no celular (bandeja 30 · respiro 8 · botão 22) */
@media (max-width:640px){
.kitbox .zk-slot>div,.kitbox .zk-slot>div>button,.kitbox .zk-slot>div>a{width:100%!important}
.kitbox .zk-slot>div>button{border-radius:22px!important}
.kitbox .zk-slot>div{border-radius:22px!important}
}
/* prévia do kit: só o item, centralizado, com respiro; sem fundo desfocado */
.kc[style*="--bg"]::before{display:none}
.kc img{max-width:none;max-height:none;width:auto;height:auto}
.kc:not(.kc-g):not(.kc-cores):not(.kc-tipo) img{max-width:calc(100% - 32px);max-height:calc(100% - 32px);object-fit:contain;border-radius:14px}
.kc-mo svg{width:auto;height:calc(100% - 40px);max-width:calc(100% - 32px);aspect-ratio:1/1}
.kc-mo{display:grid;place-items:center}
/* kit no celular: cartão vertical — prévia quadrada à esquerda, texto ao lado, seta no canto */
@media (max-width:640px){
.kcard{flex-direction:row;align-items:stretch;gap:14px;padding:8px;min-height:120px}
.kcard>.kc{flex:none;width:104px;height:auto;min-height:104px;align-self:stretch;border-radius:22px}
.kcard>.kc img{max-width:calc(100% - 20px);max-height:calc(100% - 20px)}
.kcard>.kc-mo svg{height:auto;width:calc(100% - 20px)}
.kcard>.kb{flex:1 1 auto;min-width:0;padding:6px 40px 4px 0;display:flex;flex-direction:column;gap:2px;justify-content:center}
.kcard .kmeta{flex-wrap:wrap;gap:4px 8px}
.kcard .kgo{right:8px;bottom:8px}
}
/* texto com selos de fonte no meio: célula em bloco para não quebrar em colunas soltas */
@media (max-width:640px){
.tw table.t td[data-l="O que mostra"],.tw table.t td[data-l="O que mostrar"]{display:block}
.tw table.t td[data-l="O que mostra"]::before,.tw table.t td[data-l="O que mostrar"]::before{display:block;margin-bottom:2px}
.tw table.t td[data-l="O que mostra"]>*,.tw table.t td[data-l="O que mostrar"]>*{width:auto;display:inline}
}
/* Engrenagem que encaixa: conteúdo direto no cartão, sem cartão dentro de cartão */
.card-in{padding:26px 24px 24px}
.card-in>.cb{background:none;padding:0;border-radius:0;gap:16px}
.card-in>.cb>.tw{padding:0;background:none;border:0;box-shadow:none}
.card-in>.cb .tw table.t td{padding-left:0;padding-right:0}
.card-in>.cb .tw table.t tr{padding:14px 0}
.card-in>.cb .tw table.t tr:first-child{padding-top:0}
.card-in>.cb .tw table.t tr:last-child{padding-bottom:0}
.card-in>.cb .mv-ctl{align-self:flex-start;margin:0}
.card-in>.cb .dls{margin:0;justify-content:flex-start}
@media (max-width:640px){.card-in>.cb .tw table.t td:first-child{padding-bottom:4px}}
.card-in>.cb>.tw{margin:0!important}
.card-in>.cb .tw table.t th{padding-left:0;padding-right:0}
.card-in>.cb .tw table.t th:first-child,.card-in>.cb .tw table.t td:first-child{padding-left:0}
/* prévia de proporção mais baixa no celular */
@media (max-width:640px){
.pmock{aspect-ratio:16/10}
.pmock .m-head{height:28%}
.pmock .m-tx{top:38%;height:11%}
.pmock .m-tx2{top:55%;height:8%}
.pmock .m-btn{bottom:12%;height:17%}
.pmock .m-dot{bottom:12%;width:7%}
}
/* tabela dentro de cartão no celular: sem margem negativa, sem painel interno, respiro igual nos quatro lados */
@media (max-width:640px){
.card:has(>.tw){padding:22px}
.card:has(>.tw)>.lbl{padding:0 0 10px;margin:0}
.card>.tw{margin:0!important;padding:0!important;background:none!important;border-radius:0}
.card>.tw table.t tr:first-child{padding-top:4px}
.card>.tw table.t tr:last-child{padding-bottom:0}
}
/* seta do cartão do kit: círculo concêntrico (cartão 30 · respiro 8 · círculo 22) */
.kcard .kgo{width:44px;height:44px;right:8px;bottom:8px}
@media (max-width:640px){
.kcard>.kb{padding-right:0}
.kcard .kmeta{padding-right:52px;min-height:44px;align-items:center}
.kcard .kgo{right:8px;bottom:8px}
}
/* troca entre as duas páginas com fade, sem piscar */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
/* logotipo colorido precisa de fundo claro nos dois temas */
.kc-logo{background:#F1F1F1!important}
.kcard>.kc-logo img{border-radius:0;max-width:calc(100% - 28px);max-height:calc(100% - 28px)}
.kcard>.kc-logo img{padding:12px;box-sizing:border-box;max-width:100%;max-height:100%}
/* controles ficam na própria prévia da animação */
.mv-loop{position:relative}
.mv-loop .mv-over{position:absolute;left:8px;right:8px;bottom:8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mv-loop .mv-over .dls{margin:0}
.mv-loop .mv-over{justify-content:flex-end}
/* filtros com rolagem: espaço interno para a sombra e a borda não serem cortadas */
.zfilter .zk-slot{padding:10px 10px 18px;margin:-10px -10px -18px;box-sizing:content-box;border-radius:0;max-width:calc(100% + 20px)}
.zfilter>.zk-slot:first-child{width:min(calc(100% + 20px),450px)}
@layer manual{
@media (min-width:641px){
.zfilter{align-items:center}
.zfilter>.zk-slot:has(input){flex:1 1 220px;max-width:none;width:auto}
.zfilter>.zk-slot:has(input) :is(label,div,input):not(svg *){min-height:54px}
}
}
@layer manual{
.zfilter{justify-content:flex-start}
.zfilter>.zk-slot:first-child{width:auto;flex:0 1 auto;max-width:calc(100% + 20px)}
.zfilter>.zk-slot:not(:first-child){flex:0 0 auto}
.zfilter>.zk-slot:has(input){flex:1 1 220px!important}
.zfilter>.fcount{margin-left:auto}
}
@layer manual{
.mv-hero .bd .mv-ctl{justify-self:end!important;align-self:flex-end!important}
.mv-hero .bd .dls{justify-content:flex-end!important}
.mv-hero .bd>div:last-child{justify-items:end!important;width:100%}
}
@layer manual{
.zfilter>.zk-slot:first-child>*{width:100%!important;max-width:100%}
.zfilter>.zk-slot:first-child{width:min(660px,calc(100% + 20px))!important;flex:0 0 auto}
}
@layer manual{
/* Marca para IA: bandeja com partes concêntricas; o botão tem coluna fixa e não mexe no texto */
.aibox{padding:8px;gap:8px;border-radius:30px}
.aibox>div:first-child{display:grid!important;grid-template-columns:minmax(0,1fr) 248px;gap:16px!important;align-items:center!important;padding:22px 22px 22px 28px;background:var(--part-soft);border-radius:22px}
.aibox>div:first-child>p{padding:0!important;margin:0!important;max-width:58ch!important;background:none!important}
.aibox>div:first-child>.zk-slot{display:flex;justify-content:flex-end;width:248px;padding:0;margin:0;max-width:none;overflow:visible}
.aibox>div:first-child>.zk-slot>*{flex:none}
.aibox>.steps{padding:0!important;gap:8px}
.aibox>.steps li{background:var(--part-soft);border-radius:22px;padding:18px 22px 20px;gap:8px;align-content:start}
.aibox>.g3{gap:8px}
.aibox .task{padding:20px 22px;gap:8px}
.aibox>.dls{padding:4px 4px 6px!important;margin:0!important}
@media (max-width:640px){
.aibox>div:first-child{grid-template-columns:minmax(0,1fr);padding:20px 22px}
.aibox>div:first-child>.zk-slot{width:100%}
.aibox>div:first-child>.zk-slot>*{width:100%}
.aibox>div:first-child button{width:100%;justify-content:center}
}
}
@layer manual{
}
@layer manual{
.aibox>.steps,.aibox>.g3{gap:8px!important}
.aibox>.zk-slot{margin:0!important}
.aibox>.dls{padding:2px 4px 4px!important;gap:8px!important}
}

/* ===== layout-qa (30/10): grades sem buraco, paleta numa linha, prévias que não cortam ===== */
/* paleta: todas as cores numa linha no desktop; tablet até 3 e celular até 2 por linha, linhas equilibradas (vãos de 6 colunas vindos do build) */
.pal{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:var(--s4)}
.pal>.pal-i{display:grid;min-width:0;grid-column:span var(--d,1)}
.pal>.pal-i>*{min-width:0}
.pal>.pal-i:not(.pal-note){container:pi/inline-size}
.pal .cp{white-space:nowrap}
@container pi (max-width:200px){.pal .sw .bd{padding:14px 10px 10px}.pal .cp{font-size:11px;padding:0 9px;min-height:28px;letter-spacing:-.1px}.pal .sw .bd h4{font-size:15px}}
.pal .sw .chip{height:128px}
.pal .sw .vals{gap:6px}
.pal-note>.card{display:grid;align-content:start;gap:10px;height:100%;box-sizing:border-box}
.pal-note>.card>p{margin:0}
@container cs (max-width:900px){.pal{grid-template-columns:repeat(6,minmax(0,1fr))}.pal>.pal-i{grid-column:span var(--t,2)}}
@container cs (max-width:560px){.pal>.pal-i{grid-column:span var(--p,3)}.pal .sw .chip{height:96px}.pal .cp{padding:0 10px;font-size:12px}}

/* assinatura principal (cartão de largura total): altura própria, o logo não pode ficar com 0 px */
.tile.full .pv.fix{aspect-ratio:auto;min-height:200px;padding:56px 10%}
.tile.full .pv.fix>img{max-height:none!important;width:min(60%,440px)!important;height:auto!important;max-width:100%}
@container cs (max-width:640px){.tile.full .pv.fix{min-height:150px;padding:40px 8%}.tile.full .pv.fix>img{width:min(100%,340px)!important}}

/* grades de 3: no desktop até 3 por linha, no tablet até 2; as linhas incompletas se dividem (6 colunas), sem buraco */
@container cs (min-width:961px){
.g3:not(.pal){grid-template-columns:repeat(6,minmax(0,1fr))}
.g3:not(.pal)>*{grid-column:span 2}
.g3:not(.pal):has(>:first-child:nth-last-child(3n+4))>:nth-last-child(-n+4){grid-column:span 3}
.g3:not(.pal):has(>:first-child:nth-last-child(3n+2))>:nth-last-child(-n+2){grid-column:span 3}
}
@container cs (min-width:641px) and (max-width:960px){
.g3:not(.pal){grid-template-columns:repeat(6,minmax(0,1fr))}
.g3:not(.pal)>*{grid-column:span 3}
.g3:not(.pal):has(>:first-child:nth-last-child(2n+3))>:nth-last-child(-n+3){grid-column:span 2}
}
/* grades de 2 (e listas de notas): número ímpar → o último ocupa a linha inteira */
@container cs (min-width:641px){
.g2>:last-child:nth-child(odd):not(:first-child),.note-list>:last-child:nth-child(odd):not(:first-child){grid-column:1/-1}
}
@container cs (max-width:900px) and (min-width:641px){.fn>:last-child:nth-child(odd){grid-column:1/-1}}
@container cs (max-width:1100px) and (min-width:641px){.zgrid>:last-child:nth-child(odd){grid-column:1/-1}}

/* explorador do kit: 12 colunas, vãos por linha calculados no manual.js (linhas equilibradas, sem buraco) */
.kgrid{grid-template-columns:repeat(12,minmax(0,1fr))}
.kgrid>.kcard{grid-column:span var(--k,3);min-width:0}
/* prévia do cartão: a imagem cabe inteira (contida) e com respiro; nada cortado */
.kc:not(.kc-g):not(.kc-cores):not(.kc-tipo):not(.kc-mo):not(.kc-full) img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:18px;box-sizing:border-box;object-fit:contain;border-radius:0}
.kcard>.kc-logo img,.kcard>.kc-claro img{padding:18px!important;max-width:none!important;max-height:none!important}
@media (max-width:640px){.kc:not(.kc-g):not(.kc-cores):not(.kc-tipo):not(.kc-mo):not(.kc-full) img,.kcard>.kc-logo img,.kcard>.kc-claro img{padding:12px!important}}
/* logos, ícones e elementos na cor da marca: fundo névoa fixo nos dois temas (azul-marinho e grafite somem no escuro) */
.kc-claro{background:#F1F1F1!important}

/* revelação no celular: texto, controles e downloads cabem no cartão */
@container cs (max-width:640px){
.mv-hero .bd{grid-template-columns:minmax(0,1fr)!important}
.mv-hero .bd>div,.mv-hero .bd>div:last-child{min-width:0;width:100%!important;justify-items:start!important}
.mv-hero .bd .mv-ctl{justify-self:start!important;align-self:start!important;width:100%;box-sizing:border-box}
.mv-hero .mv-ctl .btn{flex:1 1 0;min-width:0;padding:0 10px}
.mv-hero .bd .dls{justify-content:flex-start!important}
}

/* capa do hub: azul liso, sem faixa de ondas nem brilho; a grade de coordenadas fica quase invisível */
.hc-stage.hc-min{padding:64px 24px;min-height:0}

.hc-min .hc-in{gap:24px}
.hc-min .hc-simbs{margin-top:8px}
@container cs (max-width:640px){.hc-stage.hc-min{padding:44px 20px}}

/* Marca para IA: "Baixar DESIGN.md" embaixo do "Copiar prompt", na mesma coluna */
.aibox>div:first-child>p{grid-row:span 2}
.aibox>div:first-child>.ai-design{grid-column:2}
.aibox>div:first-child>.ai-design>*{flex:none}
@media (max-width:640px){.aibox>div:first-child>p{grid-row:auto}.aibox>div:first-child>.ai-design{grid-column:auto;width:100%}.aibox>div:first-child>.ai-design>*,.aibox>div:first-child>.ai-design button{width:100%;justify-content:center}}

/* calculadora de contraste: duas fileiras de cores em peças redondas, prévia e resultado */
.ccalc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.cc-ctl{display:grid;gap:16px;align-content:start}
.cc-f{display:grid;gap:8px}
.cc-sw{display:flex;flex-wrap:wrap;gap:6px}
.cc-b{width:44px;height:44px;border-radius:50%;border:0;padding:5px;background:var(--part);cursor:pointer;display:grid;place-items:center;transition:background-color .2s}
.cc-b i{display:block;width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(31,31,31,.12)}
.cc-b[aria-pressed=true]{background:var(--inverse)}
.cc-b:focus-visible{outline:0;box-shadow:0 0 0 3px var(--focus-ring)}
.cc-pv{border-radius:22px;padding:24px;display:grid;gap:8px;align-content:center;min-height:140px;box-shadow:inset 0 0 0 1px var(--divider)}
.cc-pv b{font:500 26px/1.15 var(--mono)}
.cc-pv span{font:400 16px/1.5 var(--mono)}
.cc-r{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.cc-r>div{background:var(--part-soft);border-radius:22px;padding:12px 16px}
.cc-r dt{font:500 12.5px/16px var(--mono);color:var(--muted)}
.cc-r dd{margin:4px 0 0;font:500 16px/22px var(--mono);overflow-wrap:anywhere}
.cc-r dd.ok{color:#18804A}.cc-r dd.no{color:#C9363B}
html[data-theme=dark] .cc-r dd.ok{color:#3DD68C}html[data-theme=dark] .cc-r dd.no{color:#FF6369}
@container cs (max-width:760px){.ccalc{grid-template-columns:minmax(0,1fr)}.cc-r{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* atalhos em 2 colunas: número ímpar → o último ocupa a linha */
@container cs (max-width:900px){.atalhos:not(.a3)>:last-child:nth-child(odd){grid-column:1/-1}}
@container cs (max-width:640px){.atalhos.a3>:last-child:nth-child(odd){grid-column:1/-1}}
/* perfil nas redes: campo a campo em linhas, sem tabela larga */
.pf-campos{display:grid;gap:8px;margin:12px 0 0}
.pf-campos>div{background:var(--part-soft);border-radius:22px;padding:12px 18px}
.pf-campos dt{font:500 12.5px/16px var(--mono);color:var(--muted)}
.pf-campos dd{margin:2px 0 0;font:400 14px/20px var(--mono)}


/* ===== Oceanos · tipografia ===== */
body{font:400 16px/26px var(--serif)}
h1,h2,h3,h4{font-family:var(--mono);font-weight:500}
.ch-n{font:400 clamp(40px,5.2cqi,80px)/.9 var(--nico);color:transparent;-webkit-text-stroke:1px var(--muted);letter-spacing:.02em}
.hero h1{font-weight:500;letter-spacing:-.02em}
.tagline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-4px 0 18px;font:300 clamp(20px,2.2cqi,26px)/1.3 var(--mono);color:var(--link)}
.nico{font-family:var(--nico)!important;font-weight:400!important}
.spec .big.nico{font-size:clamp(48px,7.4cqi,96px);letter-spacing:.02em}
.spec .glyph.nico{font-size:16px;letter-spacing:.06em}
.pesos{display:flex;flex-wrap:wrap;gap:6px 14px;font:24px/1.2 var(--mono)}
.descritor{font:200 15px/1.4 var(--mono);letter-spacing:.4em;text-transform:uppercase;color:var(--ink)}
.desc-card{display:grid;gap:16px}
.desc-demo{display:grid;gap:10px;justify-items:start;padding:20px;border-radius:22px;background:#F1F1F1;color:#1F1F1F}
.desc-demo .descritor{color:#1F1F1F}
.desc-logo{display:block;width:min(100%,420px)}
.kb-t{font:500 clamp(22px,3cqi,30px)/1.2 var(--mono);margin:6px 0}
.lbl{font-family:var(--mono)}
.zk-ready .skip{display:none}
.vazio{padding:14px 18px;border-radius:22px;background:var(--part-soft)}

/* ===== palco das animações (fundo próprio da marca, não inverte com o tema) ===== */
.palco{position:relative;overflow:hidden;background:var(--palco)!important;color:#F1F1F1;isolation:isolate}
.palco::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(56% 50% at 50% 38%,color-mix(in oklab,var(--marca-2) 26%,transparent),transparent 72%);pointer-events:none}
.palco-ondas{position:absolute;left:0;right:0;bottom:0;width:100%;height:26%;z-index:-1;pointer-events:none}
.palco-logo{position:relative;width:min(40%,280px);margin-bottom:6%}
.palco-logo>svg{display:block;width:100%;height:auto}
.hero .stage.palco{min-height:420px;display:grid;place-items:center}
@container cs (max-width:900px){.hero .stage.palco{min-height:0;aspect-ratio:1/1}.palco-logo{width:min(46%,240px)}}
.stage.palco .ctl{z-index:2}

/* ===== motor de movimento (mesmo nas 4 marcas): revelação, símbolo em loop e carregando =====
   Cada parte do arquivo oficial anima sozinha (logos.logo_animado). Só transform e opacity; o estado sem animação é o arquivo
   oficial (as peças auxiliares ficam com opacidade 0), então "reduzir movimento" e o fim de toda animação mostram o logo parado.
   --mola é a curva Mola de comum.py (C.MOLA). */
:root{--mola:linear(0,0.029,0.101,0.202,0.316,0.434,0.548,0.653,0.747,0.827,0.892,0.945,0.985,1.014,1.034,1.047,1.053,1.054,1.052,1.048,1.043,1.036,1.03,1.024,1.018,1.013,1.009,1.005,1.003,1.001,0.999,0.998,0.997,0.997,0.997,0.997,0.997,0.998,0.998,0.998,1);--assentar:cubic-bezier(.16,1,.3,1);--respiro:cubic-bezier(.45,0,.55,1);--varre:cubic-bezier(.65,0,.35,1)}
.mv-onda,.mv-disco,.mv-cel,.mv-l,.mv-d,.mv-pulso{transform-box:fill-box;transform-origin:50% 50%}
.mv-sym,.mv-varre,.mv-rede-m,.mv-leme,.mv-trava{transform-box:view-box}
.mv-eco,.mv-brilho,.mv-pulso{opacity:0}
.mv-off,.mv-off *{animation-play-state:paused!important}

/* revelação: profundidade, ondas de baixo para cima, o sinal da frente, letreiro letra a letra e descritor */
.anim .mv-sym{animation:mvFundo 1.8s var(--assentar) backwards}
@keyframes mvFundo{from{transform:scale(.92)}}
.anim .mv-onda{animation:mvOnda 1s var(--mola) backwards}
.anim .mv-o4{animation-delay:.1s}.anim .mv-o3{animation-delay:.19s}.anim .mv-o2{animation-delay:.28s}.anim .mv-o1{animation-delay:.37s}
@keyframes mvOnda{0%{opacity:0;transform:translateY(90%)}35%{opacity:1}to{opacity:1;transform:none}}
.anim.mv-sobe .mv-disco{animation:mvSol 2.1s cubic-bezier(.3,.1,.15,1) .3s backwards}
.anim.mv-sobe .mv-varre{animation:none}
.anim.mv-sobe .mv-anel{animation:mvAnel .7s var(--assentar) backwards}
@keyframes mvAnel{from{opacity:0}}
@keyframes mvSol{from{transform:translateY(103%)}}
.anim .mv-disco{animation:mvDisco 1.2s var(--assentar) backwards}
@keyframes mvDisco{0%{opacity:0;transform:scale(.6)}40%{opacity:1}to{opacity:1;transform:none}}
.anim .mv-varre{animation:mvVarre 1.1s var(--varre) .4s backwards}
@keyframes mvVarre{from{transform:rotate(-180deg)}}
.anim .mv-leme{animation:mvLeme 1.5s var(--mola) .55s backwards}
@keyframes mvLeme{0%{opacity:0;transform:rotate(-135deg)}20%{opacity:1}to{opacity:1;transform:none}}
.anim .mv-eco{animation:mvEco 1.5s linear .55s}
@keyframes mvEco{from,to{opacity:1}}
.anim .mv-trava{animation:mvTrava .45s cubic-bezier(.4,0,.2,1) 1.3s backwards}
@keyframes mvTrava{35%{transform:scale(1.035)}}
.anim.mv-monta .mv-cel{animation:mvCel .8s var(--mola) backwards;animation-delay:calc(.45s + var(--i) * .05s)}
@keyframes mvCel{0%{opacity:0;transform:translateY(-60%) scale(.7)}30%{opacity:1}to{opacity:1;transform:none}}
.anim .mv-rede-m{animation:mvRede 1.3s cubic-bezier(.45,.05,.2,1) .1s backwards}
@keyframes mvRede{from{transform:scale(0)}}
.anim.mv-acende .mv-cel{animation:mvGomo .9s var(--mola) backwards;animation-delay:calc(.5s + var(--i) * .1s)}
@keyframes mvGomo{0%{opacity:0;transform:scale(.88)}40%{opacity:1}to{opacity:1;transform:none}}
.anim .mv-pulso{animation:mvPulso .9s var(--assentar);animation-delay:calc(.3s + var(--i) * .25s)}
@keyframes mvPulso{0%{opacity:0;transform:scale(.6)}8%{opacity:.9}to{opacity:0;transform:scale(2.6)}}
.anim .mv-brilho{animation:mvBrilho 1s var(--respiro) 1.85s}
@keyframes mvBrilho{from{opacity:1;transform:translateX(calc(-1 * var(--dx)))}to{opacity:1;transform:translateX(var(--dx))}}
.anim .mv-l{animation:mvLetra .9s var(--mola) backwards;animation-delay:calc(1.3s + var(--i) * .045s)}
@keyframes mvLetra{0%{opacity:0;transform:translateY(105%)}30%{opacity:1}to{opacity:1;transform:none}}
.anim .mv-d{animation:mvDesc 1.1s var(--assentar) backwards;animation-delay:calc(1.75s + var(--i) * .008s)}
@keyframes mvDesc{0%{opacity:0;transform:translateX(var(--dx))}60%{opacity:1}to{opacity:1;transform:none}}

/* símbolo em loop (4,8 s): a maré passa pelas ondas; cada frente faz o seu gesto e volta ao arquivo */
.loop .mv-onda{animation:mvBob 4.8s var(--respiro) infinite}
.loop .mv-o3{animation-delay:.3s}.loop .mv-o2{animation-delay:.6s}.loop .mv-o1{animation-delay:.9s}
@keyframes mvBob{0%,50%,100%{transform:none}22%{transform:translateY(-16%)}}
.loop.mv-sobe .mv-disco{animation:mvLoopSol 4.8s var(--respiro) infinite}
@keyframes mvLoopSol{0%,40%,100%{transform:none}70%{transform:translateY(5%)}}
.loop .mv-leme{animation:mvLoopLeme 4.8s infinite}
@keyframes mvLoopLeme{0%,38%{transform:none;animation-timing-function:var(--mola)}72%,100%{transform:rotate(45deg)}}
.loop .mv-eco,.load .mv-eco{animation:mvEco 4.8s linear infinite}
.loop .mv-trava{animation:mvLoopTrava 4.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes mvLoopTrava{0%,57%,72%,100%{transform:none}63%{transform:scale(1.03)}}
.loop.mv-monta .mv-cel{animation:mvLoopCel 4.8s var(--respiro) infinite;animation-delay:calc(1.7s + var(--i) * .05s)}
@keyframes mvLoopCel{0%,24%,100%{transform:none}10%{transform:translateY(-9%)}}
.loop .mv-pulso{animation:mvLoopPulso 4.8s var(--assentar) infinite;animation-delay:calc(1.8s + var(--i) * .3s)}
@keyframes mvLoopPulso{0%{opacity:0;transform:scale(.6)}4%{opacity:.9}24%,100%{opacity:0;transform:scale(2.6)}}
.loop .mv-brilho{animation:mvLoopBrilho 4.8s var(--respiro) infinite}
@keyframes mvLoopBrilho{0%,40%{opacity:1;transform:translateX(calc(-1 * var(--dx)))}75%,100%{opacity:1;transform:translateX(var(--dx))}}

/* carregando (1,6 s): as ondas acendem de cima para baixo; o leme avança um raio e os nós da rede pulsam */
.load .mv-onda{animation:mvLoad 1.6s cubic-bezier(.4,0,.2,1) infinite}
.load .mv-o2{animation-delay:-1.44s}.load .mv-o3{animation-delay:-1.28s}.load .mv-o4{animation-delay:-1.12s}
@keyframes mvLoad{0%,100%{opacity:.25;transform:none}25%{opacity:1;transform:translateY(-8%)}55%{opacity:.25;transform:none}}
.load .mv-leme{animation:mvLoadLeme 1.6s infinite}
@keyframes mvLoadLeme{0%{transform:none;animation-timing-function:var(--mola)}70%,100%{transform:rotate(45deg)}}
.load .mv-pulso{animation:mvLoadPulso 1.6s var(--assentar) infinite}
.load .mv-pulso[style*="--i:1"]{animation-delay:-1.07s}.load .mv-pulso[style*="--i:2"]{animation-delay:-.54s}
@keyframes mvLoadPulso{0%{opacity:0;transform:scale(.6)}6%{opacity:.9}45%,100%{opacity:0;transform:scale(2.4)}}
@media (prefers-reduced-motion:reduce){.anim *,.loop *,.load *,.om-svg{animation:none!important}}
.mv-hero .pv{aspect-ratio:16/8}
.mv-hero .pv svg{width:min(26%,240px);height:auto}
.mv-hero .bd{align-items:flex-start}
.mv-side{display:grid;gap:8px;justify-items:end;text-align:right}
@container cs (max-width:640px){.mv-side{justify-items:start;text-align:left}}
.pv.sq{aspect-ratio:1/1;display:grid;place-items:center;position:relative}
.pv.sq>svg{width:46%;height:auto}
.mv-loopc .pv{position:relative}
.mv-over{position:absolute;right:12px;bottom:12px}
.mv-over .mv-ctl{padding:5px;border-radius:9999px;background:var(--tray);box-shadow:var(--shadow-tray)}
.mv-over .btn,.mv-card .mv-ctl .btn{height:32px;padding:0 12px;font-size:13px}

/* ===== em produção ===== */
.prod{display:grid;gap:10px;justify-items:start;padding:calc(var(--cp) + 4px);border-radius:30px;background:var(--tray);box-shadow:var(--shadow-tray);outline:1px dashed var(--control-ring);outline-offset:-8px}
.prod h4{font-size:17px;line-height:23px}
.prod p{max-width:70ch}
.selo-prod{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:9999px;background:var(--warning-soft);color:var(--warning-ink);font:500 12px/14px var(--mono)}

/* ===== A marca ===== */
.eco{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@container cs (max-width:900px){.eco{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container cs (max-width:420px){.eco{grid-template-columns:minmax(0,1fr)}}
.eco-i{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:9999px;background:var(--tray);box-shadow:var(--shadow-tray);color:var(--ink);text-decoration:none;min-width:0;transition:box-shadow .2s,transform .16s}
.eco-i:hover{box-shadow:var(--shadow-tray),0 0 0 2px var(--part-hover)}
.eco-i.on{box-shadow:var(--shadow-tray),0 0 0 2px var(--c)}
:root[data-theme="dark"] .eco-i.on{box-shadow:var(--shadow-tray),0 0 0 2px var(--cd)}
.eco-i span{display:grid;min-width:0}
.eco-i b{font:500 15px/18px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eco-i small{font-size:12.5px;line-height:16px;color:var(--muted)}
.eco-i img{flex:none;border-radius:50%}
.serv .svc{display:grid;gap:10px;align-content:start}
.serv .svc svg{width:28px;height:28px;color:var(--link)}
.assin-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.assin-t{font:400 clamp(26px,3.6cqi,40px)/1.15 var(--mono);color:var(--link);margin:4px 0}

/* ===== Logotipo ===== */
.lstage{background:#F1F1F1!important;color:#1F1F1F}
.lstage svg.diag{max-width:900px}
dialog.big .db.lstage{background:#F1F1F1}
dialog.big .db svg{min-width:880px;width:100%;height:auto}
.pv.fix{background-clip:padding-box}
.tile.full .pv{aspect-ratio:auto;height:220px;padding:56px 18%}
.tile .pv.fix{padding:13% 16%}
.tile .pv.fix>img[style]{max-height:100%}
.resp .pv.fix{height:170px;padding:30px 10%}
.resp .pv .tam{display:flex;gap:20px;align-items:center;justify-content:center}
.resp .pv .tam img{display:block}
.badge.der{background:var(--warning-soft);color:var(--warning-ink);height:22px;padding:0 8px;font-size:11.5px;vertical-align:middle;margin-left:4px}
.vtabs{margin-bottom:16px}
.vset[hidden]{display:none!important}
.reduz{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;padding:20px;border-radius:22px;background:#F1F1F1;color:#1F1F1F}
.reduz>div{display:grid;gap:8px}
.reduz>div{min-width:0;max-width:100%;grid-template-columns:minmax(0,1fr)}
.reduz>div>span:first-child{display:block;max-width:100%}
.reduz .small{color:#575D63}.reduz .no{color:#C9363B}
.reduz .abaixo{opacity:.55}
.fstage{position:relative;margin-top:16px;border-radius:30px;overflow:hidden;box-shadow:var(--shadow-tray)}
.fs-op{display:grid;place-items:center;gap:16px;min-height:260px;padding:32px 24px}
.fs-op[hidden]{display:none}
.fs-cap{font:500 14px/20px var(--mono);padding:6px 14px;border-radius:9999px;background:rgba(31,31,31,.55);color:#F1F1F1;max-width:none;text-align:center}
.fs-op[data-k="claro"] .fs-cap{background:rgba(255,255,255,.7);color:#1F1F1F}

/* ===== Símbolo ===== */
.fam{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@container cs (max-width:640px){.fam{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fam-i{display:grid;gap:8px;justify-items:center;text-align:center;padding:16px 12px;border-radius:30px;background:var(--tray);box-shadow:var(--shadow-tray);color:var(--ink);text-decoration:none}
.fam-i img{max-width:96px}
.fam-i.on{box-shadow:var(--shadow-tray),0 0 0 2px var(--link)}
.agua .pv .wm{position:absolute;right:-6%;bottom:-16%;width:62%;pointer-events:none}
.agua .pv .wm img{width:100%;height:auto;max-height:none}
.agua .pv .t{font:500 20px/1.2 var(--mono)}

/* ===== Cores ===== */
.amostra{display:inline-block;padding:5px 14px;border-radius:9999px;font:500 14px/18px var(--mono);box-shadow:inset 0 0 0 1px var(--divider);white-space:nowrap}
.swv{display:inline-flex;align-items:center;gap:8px}
.swv i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--control-ring);flex:none}
@supports (corner-shape:squircle){.swv i,.eco-i img,.amostra{corner-shape:round}}
.g3.one{grid-template-columns:repeat(3,minmax(0,1fr))}
@container cs (max-width:900px){.g3.one{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container cs (max-width:560px){.g3.one{grid-template-columns:minmax(0,1fr)}}

/* ===== Tipografia ===== */
.tt-frame .out .tt-nico{margin:6px 0 10px;font:400 26px/1.1 var(--nico);letter-spacing:.02em;color:var(--link)}
.tt-frame[data-m=m] .out .tt-nico{font-size:20px}
.tt-frame .out .tt-nico.sem{font:600 22px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.tt-acento{margin:0;text-align:center;color:var(--warning-ink)}

/* ===== Carta náutica ===== */
.onda-c{padding:16px}
.onda-c svg{display:block;width:100%;height:auto;border-radius:22px}
.note-list.one{grid-template-columns:minmax(0,1fr);margin-top:0}
.pr .pv{padding:0;aspect-ratio:16/10;overflow:hidden}
.pr .pv>svg{width:100%;height:100%;display:block}
.pat .pv>svg{width:100%;height:auto;max-height:100%}
.ondas-mov{position:relative;overflow:hidden;border-radius:30px;background:var(--palco,#0B206A);box-shadow:var(--shadow-tray);height:220px}
html[data-marca] .ondas-mov{background:var(--marca)}
.om-faixa{position:absolute;left:0;bottom:24px;width:200%;height:auto}
.om-svg{display:block;width:100%;height:auto;animation:omDesliza 24s linear infinite}
@keyframes omDesliza{to{transform:translateX(-25%)}}
.ondas-mov.paused .om-svg{animation-play-state:paused}
.om-ctl{position:absolute;right:16px;top:16px;padding:5px;border-radius:9999px;background:var(--tray);box-shadow:var(--shadow-tray)}
.om-ctl .btn{height:32px;padding:0 12px;font-size:13px;background:transparent}
.om-fam{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
@container cs (max-width:760px){.om-fam{grid-template-columns:repeat(2,minmax(0,1fr))}}
.om-i{display:grid;gap:8px;padding:8px 8px 12px;border-radius:30px;background:var(--tray);box-shadow:var(--shadow-tray);color:var(--ink);text-decoration:none}
.om-i b{font:500 14px/18px var(--mono);padding:0 8px}
.om-i .small{padding:0 8px}
.om-mini{display:block;border-radius:22px;overflow:hidden;background:#F1F1F1}
.om-mini svg{display:block;width:100%;height:auto}
.el-i{color:var(--ink);text-decoration:none}

/* ===== Página inicial ===== */
.hub-hero{padding-block:var(--s8) var(--sec)}
.hub-hero .wrap{display:grid;gap:var(--s8)}
.hc-stage{border-radius:30px;min-height:460px;display:grid;place-items:center;padding:48px 24px 120px;box-shadow:var(--shadow-tray)}
.hc-coord{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hc-in{display:grid;justify-items:center;gap:20px;text-align:center;max-width:760px}
.hc-eye{font:400 clamp(16px,2.4cqi,22px)/1 var(--nico);letter-spacing:.3em;color:var(--marca-2);margin:0}
.hc-logo{width:min(80%,520px);height:auto}
.hc-lead{font:300 clamp(17px,1.9cqi,20px)/1.5 var(--mono);color:#F1F1F1;max-width:56ch}
.hc-simbs{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hc-s{display:block;width:56px;transition:transform .25s cubic-bezier(.2,1.3,.4,1)}
.hc-s:hover{transform:translateY(-4px)}
.hc-txt h1{font-size:clamp(34px,5cqi,60px);line-height:1.05;margin:10px 0 14px}
.hc-txt h1 em,.hub-ch h2 em{font-style:normal;color:var(--link)}
.ch-h.nonum{grid-template-columns:minmax(0,1fr)}
.ch-h.nonum .lbl,.ch-h.nonum h2{grid-column:1}
.bcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@container cs (max-width:760px){.bcs{grid-template-columns:minmax(0,1fr)}}
.bc{display:flex;flex-direction:column;padding:8px;border-radius:30px;background:var(--tray);box-shadow:var(--shadow-tray);min-width:0}
.bc-top{position:relative;display:grid;place-items:center;height:180px;border-radius:22px;overflow:hidden}
.bc-sym{display:block;width:104px;transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.bc:hover .bc-sym{transform:scale(1.05)}
.bc-cores{position:absolute;left:12px;bottom:12px;display:flex;gap:4px}
.bc-cores i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(241,241,241,.6)}
@supports (corner-shape:squircle){.bc-cores i{corner-shape:round}}
.bc-bd{display:grid;gap:8px;padding:16px 16px 8px;align-content:start}
.bc-bd h3{font-size:22px;line-height:28px}
.bc-tag{font:300 17px/24px var(--mono);color:var(--link);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.arv{display:grid;justify-items:center;gap:0;padding:24px;border-radius:30px;background:var(--tray);box-shadow:var(--shadow-tray);color:var(--muted)}
.arv-m{display:grid;justify-items:center;gap:6px;padding:16px 24px;border-radius:22px;background:#F1F1F1;color:#575D63;text-decoration:none;box-shadow:inset 0 0 0 1px var(--divider)}
.arv-m .small{color:#575D63}
.arv-m.on,.arv-f.on{box-shadow:inset 0 0 0 2px var(--link)}
.arv-l{width:min(100%,600px);height:44px;display:block}
.arv-fs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
@container cs (max-width:640px){.arv-fs{grid-template-columns:minmax(0,1fr)}.arv-l{display:none}.arv{gap:12px}}
.arv-f{display:grid;justify-items:center;gap:4px;padding:14px 10px;border-radius:22px;background:var(--part-soft);color:var(--ink);text-decoration:none;text-align:center}
.arv-f b{font:500 15px/18px var(--mono)}
.fxw{position:relative;padding:24px;border-radius:30px;background:var(--tray);box-shadow:var(--shadow-tray)}
.fx-rota{position:absolute;left:24px;right:24px;top:20px;width:calc(100% - 48px);height:96px;color:var(--link);opacity:.55;pointer-events:none}
.fxl{position:relative;list-style:none;margin:0;padding:72px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@container cs (max-width:900px){.fxl{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-rota{display:none}.fxl{padding-top:0}}
@container cs (max-width:480px){.fxl{grid-template-columns:minmax(0,1fr)}}
.fx{display:grid;gap:6px;align-content:start;padding:16px;border-radius:22px;background:var(--part-soft)}
.fx-n{font:400 26px/1 var(--nico);color:var(--c)}
:root[data-theme="dark"] .fx-n{color:var(--cd)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fx-n{color:var(--cd)}}
.fx-s img{display:block}
.fx b{font:500 16px/21px var(--mono)}
.ent h4{font-size:17px;line-height:22px}
.ent-r{display:flex;align-items:center;gap:8px;margin-top:4px;color:var(--muted)}
.hl-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:20px;border-radius:30px;background:#F1F1F1;box-shadow:var(--shadow-tray)}
@container cs (max-width:640px){.hl-l{grid-template-columns:minmax(0,1fr)}}
.hl-l a{display:block;padding:14px 18px;border-radius:22px;background:#FAFAFA}
.dl.lk::before{display:none}
.dl.lk{padding:0 14px}

/* ===== Estratégia ===== */
.blk .hd h4{font-size:17px;line-height:23px}
.dc-h{display:flex;justify-content:space-between;gap:12px;align-items:center}
.voz-t{font:400 clamp(22px,3.2cqi,34px)/1.25 var(--mono);max-width:30ch}
.voz .small{color:rgba(241,241,241,.85)}
.tit-i{padding:8px 0;border-bottom:1px solid var(--line);font:500 16px/22px var(--mono)}
.tit-i:last-child{border-bottom:0}
.nome-ok{font:500 18px/26px var(--mono)}
.nome-no{font:500 16px/24px var(--mono)}
.selos p{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.selo-t[data-t]{white-space:nowrap}
.destaque .selo-t,.voz .selo-t{background:rgba(241,241,241,.16);color:var(--nevoa)}
.destaque,.voz{background:var(--marca)!important}
:root[data-theme="dark"] .destaque,:root[data-theme="dark"] .voz{box-shadow:var(--shadow-tray),inset 0 0 0 1px rgba(255,255,255,.12)}

/* ===== casca e celular ===== */
.top-static .brand{gap:10px;align-items:center;text-decoration:none;color:var(--ink);font:500 15px/18px var(--mono)}
.top-static .brand img{width:28px;height:28px}
.ts-marcas{display:flex;gap:4px;margin-right:auto}
.ts-marcas a{padding:6px 10px;border-radius:9999px;color:var(--ink);text-decoration:none;font:400 14px/18px var(--mono)}
@media (max-width:760px){.ts-marcas{display:none}}
.side-static .ss-brand img{width:26px;height:26px}
.ai-top{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.ai-top p{max-width:56ch}
.tm img.lg{height:22px;width:auto;display:block}
.tm-top{gap:12px}

/* QA 320 px: nada passa da borda */
.fontes li{grid-template-columns:52px minmax(0,1fr);overflow-wrap:anywhere}
.fontes li>*{min-width:0}
.pcomp>*{min-width:0}
.pbar-h>*{min-width:0}
.anat figure{min-width:0;max-width:100%}
@media (max-width:25rem){.a-bar>span{font-size:13px}.a-part{padding:0 12px}.fontes li{grid-template-columns:minmax(0,1fr);gap:4px}}

/* cores de cada marca (geradas de marcas/*.py) */
html[data-marca="oceanos"]{--acc-l:#0B206A;--acc-l-h:#07174F;--acc-d:#8BDDFF;--acc-d-h:#B0E8FF;--marca:#0B206A;--marca-2:#8BDDFF;--marca-ink:#F1F1F1;--o1:#0D497E;--o2:#008AC2;--o3:#8BDDFF;--o4:#AEDEFF;--anel:#0B206A;--accent-soft:#E2E4ED;--accent-ink:#0B206A;--focus-ring:#0B206A66}
@media (prefers-color-scheme:dark){html[data-marca="oceanos"]:not([data-theme="light"]){--accent-soft:#384348;--accent-ink:#B0E8FF;--focus-ring:#8BDDFF80}}
html[data-marca="oceanos"][data-theme="dark"]{--accent-soft:#384348;--accent-ink:#B0E8FF;--focus-ring:#8BDDFF80}

html[data-marca="oceanos-shipping-agency"]{--acc-l:#A84100;--acc-l-h:#8A3500;--acc-d:#FF7E2E;--acc-d-h:#FFA066;--marca:#0B206A;--marca-2:#FF6200;--marca-ink:#F1F1F1;--o1:#CB4E00;--o2:#FF7E2E;--o3:#FFAD7B;--o4:#FFD6BD;--anel:#FF6200;--accent-soft:#F5E8E0;--accent-ink:#A84100;--focus-ring:#A8410066}
@media (prefers-color-scheme:dark){html[data-marca="oceanos-shipping-agency"]:not([data-theme="light"]){--accent-soft:#48362B;--accent-ink:#FFA066;--focus-ring:#FF7E2E80}}
html[data-marca="oceanos-shipping-agency"][data-theme="dark"]{--accent-soft:#48362B;--accent-ink:#FFA066;--focus-ring:#FF7E2E80}

html[data-marca="oceanos-solutions"]{--acc-l:#0B6A54;--acc-l-h:#085443;--acc-d:#00C268;--acc-d-h:#3DD68C;--marca:#0B6A54;--marca-2:#8BFF9B;--marca-ink:#F1F1F1;--o1:#0D7E29;--o2:#00C268;--o3:#8BFF9B;--o4:#C6FFDC;--anel:#0B6A54;--accent-soft:#E2EDEA;--accent-ink:#0B6A54;--focus-ring:#0B6A5466}
@media (prefers-color-scheme:dark){html[data-marca="oceanos-solutions"]:not([data-theme="light"]){--accent-soft:#243F33;--accent-ink:#3DD68C;--focus-ring:#00C26880}}
html[data-marca="oceanos-solutions"][data-theme="dark"]{--accent-soft:#243F33;--accent-ink:#3DD68C;--focus-ring:#00C26880}

html[data-marca="oceanos-events-global-bridge"]{--acc-l:#7A5F00;--acc-l-h:#5F4A00;--acc-d:#FDD74E;--acc-d-h:#FFE587;--marca:#1F1F1F;--marca-2:#FDD74E;--marca-ink:#F1F1F1;--o1:#B48D00;--o2:#BE9500;--o3:#FDD74E;--o4:#FFE587;--anel:#BE9500;--accent-soft:#EFECE0;--accent-ink:#7A5F00;--focus-ring:#7A5F0066}
@media (prefers-color-scheme:dark){html[data-marca="oceanos-events-global-bridge"]:not([data-theme="light"]){--accent-soft:#48422F;--accent-ink:#FFE587;--focus-ring:#FDD74E80}}
html[data-marca="oceanos-events-global-bridge"][data-theme="dark"]{--accent-soft:#48422F;--accent-ink:#FFE587;--focus-ring:#FDD74E80}

/* ===== desenho técnico (blueprints.py): pranchas, camadas, cotas, vista explodida e fundos ===== */
/* cores: --pr-* prancha (bloco da marca), --pl-* papel claro, --pd-* papel no tema escuro; vêm do style do .bp */
.bp{--bp-bg:var(--pr-bg);--bp-l:var(--pr-l);--bp-l2:var(--pr-l2);--bp-a:var(--pr-a);--k:1}
.bp[data-modo="papel"]{--bp-bg:var(--pl-bg);--bp-l:var(--pl-l);--bp-l2:var(--pl-l2);--bp-a:var(--pl-a)}
html.dark .bp[data-modo="papel"],:root[data-theme="dark"] .bp[data-modo="papel"]{--bp-bg:var(--pd-bg);--bp-l:var(--pd-l);--bp-l2:var(--pd-l2);--bp-a:var(--pd-a)}
@container cs (max-width:640px){.bp{--k:1.7}}
.bp-modo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 8px}
.bp-modo .small{margin:0}

/* SVG na página: as classes do kit, com as cores do tema */
.bp-stage{position:relative;aspect-ratio:960/600;border-radius:22px;overflow:hidden;background:var(--bp-bg);transition:background-color .3s}
.bp-stage>img,.bp-stage>svg{display:block;width:100%;height:100%;max-height:none}
.tile.bp-lib .pv.bp-stage{padding:0;aspect-ratio:960/600;background:var(--bp-bg)}
.bp-svg{fill:none;font-family:var(--mono),Outfit,sans-serif;touch-action:pan-y}
.bp-svg .bg{fill:var(--bp-bg);transition:fill .3s}
.bp-svg :is(path,circle,rect,ellipse,polygon){fill:none;stroke:var(--bp-l);stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s,fill .3s}
.bp-svg .a{stroke-width:calc(2px*var(--k))}.bp-svg .b{stroke-width:calc(1.25px*var(--k))}.bp-svg .c{stroke-width:calc(.8px*var(--k))}.bp-svg .d{stroke-width:calc(.7px*var(--k))}
.bp-svg .m{stroke:var(--bp-l2)}.bp-svg .x{stroke:var(--bp-a)}
.bp-svg .k{stroke-dasharray:6 5}.bp-svg .kc{stroke-dasharray:16 4 3 4}.bp-svg .kd{stroke-dasharray:2 4}
.bp-svg .f{fill:var(--bp-a);fill-opacity:.18;stroke:none}.bp-svg .fl{fill:var(--bp-l);fill-opacity:.07;stroke:none}.bp-svg .fl2{fill:var(--bp-l);fill-opacity:.32;stroke:none}
.bp-svg .fs{fill:var(--bp-a);stroke:none}.bp-svg .fi{fill:var(--bp-l);stroke:none}.bp-svg .fb{fill:var(--bp-bg)}
.bp-svg text{fill:var(--bp-l);stroke:none;font-weight:500;letter-spacing:.06em;transition:fill .3s}
.bp-svg .tm{fill:var(--bp-l2)}.bp-svg .tx{fill:var(--bp-a)}.bp-svg .tn{font-family:var(--nico),"Nico Moji",sans-serif;font-weight:400;letter-spacing:0}.bp-svg .t4{font-weight:400}.bp-svg .t6{font-weight:600}

/* camadas: ligar e desligar */
.bp-svg [data-l]{transition:opacity .3s,transform .9s cubic-bezier(.4,0,.2,1)}
.bp-svg [data-l].off{opacity:0;pointer-events:none}
/* cotas: escondidas até o ponteiro, o toque, o foco ou a camada "Cotas" */
.bp-svg [data-l="cotas"]{pointer-events:none}.bp-svg [data-l="cotas"] [data-c]{opacity:0;transition:opacity .25s}
.bp-svg [data-l="cotas"] [data-c].on,.bp-fig.bp-cotas .bp-svg [data-l="cotas"] [data-c],.bp-fig.bp-x .bp-svg [data-l="cotas"] [data-c]{opacity:1}
.bp-svg [data-h]{cursor:help;outline:none}
.bp-svg [data-h].on>:not(.bp-hit){stroke:var(--bp-a)}
.bp-svg [data-h]:focus-visible .bp-hit{stroke:var(--bp-a)!important;stroke-opacity:.35!important}
.bp-svg .bp-hit,.bp-svg .bp-hit *{fill:none!important;stroke:transparent!important;stroke-width:18px!important;pointer-events:stroke;stroke-dasharray:none!important}
.bp-svg .bp-hit text{display:none}
/* cruz de leitura */
.bp-svg .bp-xh{pointer-events:none;opacity:0;transition:opacity .2s}
.bp-svg .bp-xh path{stroke:var(--bp-a);stroke-width:calc(.7px*var(--k));stroke-dasharray:3 4}
.bp-stage:hover .bp-svg .bp-xh.vis{opacity:.9}
/* vista explodida: folhas e rótulos */
.bp-svg .bp-pl{pointer-events:none;fill:var(--bp-bg);fill-opacity:.5;stroke:var(--bp-l2);stroke-width:1.4px;opacity:0;transition:opacity .4s}
.bp-fig.bp-x .bp-svg .bp-pl{opacity:1}
.bp-svg .bp-xl{opacity:0;transition:opacity .3s;pointer-events:none}
.bp-fig.bp-x .bp-svg .bp-xl{opacity:1;transition-delay:.5s}
.bp-fig.bp-x .bp-svg .bp-hit,.bp-fig.bp-x .bp-svg .bp-xh,.bp-fig.bp-x .bp-svg .moldura-off{display:none}

/* desenho do traço ao entrar na tela (só com movimento permitido e sem a pausa global) */
html:not(.pause-all) .bp-fig.bp-go:not(.bp-in) .bp-svg .dw{stroke-dasharray:1 1;stroke-dashoffset:1}
html:not(.pause-all) .bp-fig.bp-go:not(.bp-in) .bp-svg :is(text,.f,.fl,.fl2,.fs,.fi,.k,.kc,.kd){opacity:0}
html:not(.pause-all) .bp-fig.bp-in .bp-svg .dw{stroke-dasharray:1 1;animation:bp-draw 1.5s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--i,0)*.32s)}
html:not(.pause-all) .bp-fig.bp-in .bp-svg :is(text,.f,.fl,.fl2,.fs,.fi,.k,.kc,.kd){animation:bp-fade .6s ease-out both;animation-delay:calc(var(--i,0)*.32s + .7s)}
html:not(.pause-all) .bp-fig .bp-svg [data-l].bp-re .dw{stroke-dasharray:1 1;animation:bp-draw2 .9s cubic-bezier(.4,0,.2,1) both}
@keyframes bp-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bp-draw2{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bp-fade{from{opacity:0}to{opacity:1}}

/* movimento ambiente (pausa fora da tela, no botão "Pausar animações" e com movimento reduzido) */
.bp-svg .lp[data-flow]{animation:bp-flow 4.8s linear infinite}
.bp-svg .lp[data-flow]:not(.k):not(.kd){stroke-dasharray:14 52}
.bp-svg .lp[data-spin]{animation:bp-spin 9s linear infinite}
.bp-svg .lp[data-rock]{animation:bp-rock 7s ease-in-out infinite alternate}
.bp-svg .lp[data-bob]{animation:bp-bob 3.6s ease-in-out infinite alternate}
.bp-svg .lp[data-float]{animation:bp-bob 4.8s ease-in-out infinite alternate;animation-delay:var(--pd,0s)}
.bp-svg .lp[data-ping]{animation:bp-ping 2.4s ease-out infinite;animation-delay:var(--pd,0s)}
.bp-svg .lp[data-pulse]{animation:bp-pulse 3.2s ease-in-out infinite;animation-delay:var(--pd,0s)}
.bp-svg .lp[style*="--pd"][data-flow]{animation-delay:calc(var(--pd,0s)*-1)}
@keyframes bp-flow{to{stroke-dashoffset:-66}}
@keyframes bp-spin{to{transform:rotate(90deg)}}
@keyframes bp-rock{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes bp-bob{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
@keyframes bp-ping{0%{opacity:0;transform:translateY(-8px)}25%{opacity:1}100%{opacity:0;transform:translateY(46px)}}
@keyframes bp-pulse{0%,100%{opacity:.25}50%{opacity:1}}
.bp-fig.bp-fora .bp-svg *,.bp-fig.bp-x .bp-svg .lp{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .bp-svg .lp{animation:none!important}
  .bp-svg [data-l],.bp-svg .bp-pl,.bp-svg .bp-xl,.bp-stage,.bp-svg .bg{transition:none!important}
}

/* controles (Zuik: bandeja e peças de 44 px) */
.bp-main{display:grid;gap:8px;margin:0;padding:8px;border-radius:30px;background:var(--tray);box-shadow:var(--shadow-tray);min-width:0}
.bp-row{display:flex;align-items:center;gap:8px;min-width:0}
.bp-strip{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%)}
.bp-strip::-webkit-scrollbar{display:none}
.bp-p{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 14px;border:0;border-radius:9999px;background:transparent;color:var(--muted);
  font:450 15px/18px var(--mono);white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s;-webkit-tap-highlight-color:transparent}
.bp-p:hover{background:var(--part-hover)}
.bp-p:active{transform:scale(.97)}
.bp-p[aria-pressed="true"]{background:var(--part);color:var(--ink)}
.bp-p:focus-visible{outline:0;box-shadow:0 0 0 2px var(--focus-ring,var(--link))}
.bp-p i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.45;transition:background-color .2s,opacity .2s}
.bp-p[aria-pressed="true"] i{background:var(--link);opacity:1}
.bp-p svg{width:18px;height:18px;flex:none}
.bp-xb{padding:0 16px 0 13px}
.bp-read{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:10px 16px 10px 13px;border-radius:22px;background:var(--part-soft);color:var(--muted);font:450 14px/20px var(--mono);min-width:0}
.bp-ri{display:grid;place-items:center;flex:none;color:var(--link)}
.bp-rt{flex:1;min-width:0}.bp-rt b{color:var(--ink);font-weight:600}
.bp-rc{flex:none;font-variant-numeric:tabular-nums;color:var(--ink);font-size:13px;letter-spacing:.02em}
.bp-dl,.bp-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.bp-acts .bp-p{height:32px;padding:0 12px 0 10px;font-size:13px}
.bp-lib .bp-rt{min-height:20px;margin:0}.bp-lib .bp-rt b{font-weight:600}
@container cs (max-width:640px){
  .bp-row{flex-wrap:wrap}.bp-xb{width:100%;justify-content:center}
  .bp-rc{display:none}
}
.bp-fam-i{color:var(--ink);text-decoration:none}
.bp-fam-i .pv{padding:0;aspect-ratio:960/600}.bp-fam-i .pv img{width:100%;height:100%;object-fit:cover;max-height:none}
.bp-fam-i.on{box-shadow:var(--shadow-tray),0 0 0 2px var(--link)}
.bp-pesos{width:100%;height:auto;color:var(--ink);font-family:var(--mono)}
.bp-sws{display:grid;gap:8px;margin-top:12px}
.bp-sw span{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:9999px;font:600 13px/16px var(--mono)}
.bp-sw span b{flex:1;font-weight:600}
.bp-sw i{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1px rgba(127,127,127,.35)}
.bp-sw small{display:block;margin:4px 16px 0;font:450 12.5px/16px var(--mono);color:var(--muted)}
.bp-fundo-demo{min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}

/* fundos de linhas: o desenho da prancha como textura, pintado com a cor de destaque a 7% */
/* só no manual visual (a página com o capítulo #desenho): as estratégias e os PDFs ficam sem textura */
main:has(#desenho) #capa,#ondas,#desenho,main:has(#desenho) .kitbox,.bp-fundo-demo{position:relative;isolation:isolate}
main:has(#desenho) #capa::after,#ondas::after,#desenho::after,main:has(#desenho) .kitbox::after,.bp-fundo-demo::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--link);opacity:.07;
  -webkit-mask:var(--bp-fundo) right top/min(1100px,100%) auto no-repeat,linear-gradient(225deg,#000 10%,transparent 70%);-webkit-mask-composite:source-in;
          mask:var(--bp-fundo) right top/min(1100px,100%) auto no-repeat,linear-gradient(225deg,#000 10%,transparent 70%);mask-composite:intersect}
#ondas::after,#desenho::after{-webkit-mask-position:left top,0 0;mask-position:left top,0 0;
  -webkit-mask-image:var(--bp-fundo),linear-gradient(135deg,#000 0,transparent 55%);mask-image:var(--bp-fundo),linear-gradient(135deg,#000 0,transparent 55%)}
.kitbox::after,.bp-fundo-demo::after{border-radius:inherit;-webkit-mask-size:auto 160%,auto;mask-size:auto 160%,auto}

@media print{#capa::after,#ondas::after,#desenho::after,.kitbox::after,.bp-fundo-demo::after{display:none}.bp-svg .lp{animation:none!important}}

html[data-marca="oceanos"]{--bp-fundo:url(/assets/blueprints/fundo-oceanos.svg?v=77bbe737)}
html[data-marca="oceanos-shipping-agency"]{--bp-fundo:url(/assets/blueprints/fundo-oceanos-shipping-agency.svg?v=42903a54)}
html[data-marca="oceanos-solutions"]{--bp-fundo:url(/assets/blueprints/fundo-oceanos-solutions.svg?v=d726323e)}
html[data-marca="oceanos-events-global-bridge"]{--bp-fundo:url(/assets/blueprints/fundo-oceanos-events-global-bridge.svg?v=0548d259)}
/* reserva responsiva */
@media (max-width:960px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.hero-g{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.hero .stage{align-self:start}}
@media (max-width:640px){.stage{aspect-ratio:4/3}}
@media (max-width:900px){.atalhos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.resp{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.ap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .tw{border:0;background:none;overflow:visible}
  table.t,table.t tbody,table.t tr,table.t td{display:block;width:100%}
  table.t thead{display:none}
  table.t tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px var(--cp);margin-bottom:12px}
  table.t td{border:0;padding:6px 0;display:grid;grid-template-columns:110px 1fr;gap:12px}
  table.t td::before{content:attr(data-l);font:500 11px/22px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
}
@media (max-width:640px){.kitbox{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.steps{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.names{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.names{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.jorn{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.ft-g{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.atalhos.a3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.themes{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.fn{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dodont{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.ilist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ilist{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.icon-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:960px){.curves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.curves{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.estr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.capas{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:480px){.capas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.note-list{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .tw{padding:0;box-shadow:none;background:none;border-radius:0}
  table.t tr{background:var(--tray);border:0;border-radius:30px;box-shadow:var(--shadow-tray);padding:12px 20px}
  table.t td::before{font:500 12px/22px var(--mono);letter-spacing:0;text-transform:none}
}
@media (max-width:1100px){.zgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.zgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.anat{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .g4:not(.one){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .g4:not(.one) .tile .bd{padding:12px 10px 8px}
  .g4:not(.one) .tile .bd h4{font-size:14px;line-height:18px}
  .g4:not(.one) .tile .bd .small{font-size:13px;line-height:18px}
  table.t tr{padding:14px 18px 12px;margin-bottom:10px;border-radius:22px}
  table.t td{display:block;padding:4px 0}
  table.t td::before{display:block;margin-bottom:2px;font:500 11.5px/16px var(--mono)}
  table.t td:first-child{font:500 15px/20px var(--mono);padding:0 0 6px}
  table.t td:first-child::before{display:none}
  .card table.t tr,.tw .tw table.t tr,.zk-acc-body table.t tr{box-shadow:none;background:var(--part-soft)}
  .card .tw{margin:0 -8px}
  .fmt svg{max-height:440px;width:auto;margin:0 auto;display:block}
  .ilist{gap:8px 12px}
  .zfilter{gap:10px}
}
@media (max-width:640px){
  table.t td{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:baseline;padding:3px 0}
  table.t td::before{margin:0;font:500 11.5px/18px var(--mono)}
  table.t td:first-child{display:block}
}
@media (max-width:640px){.pdet{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.tt-g{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1000px){.ilist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ilist{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.tile .pv{padding:14px}}
@media (max-width:520px){.fn{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fn .fcard .dot{height:36px}.fn .fcard .hd{flex-wrap:wrap}}
@media (max-width:900px){.hero .stage{min-height:0;aspect-ratio:1/1;max-width:100%}}
@media (max-width:640px){.kitbox{grid-template-columns:minmax(0,1fr)}.kitbox .zk-slot>*,.kitbox .zk-slot button,.kitbox .zk-slot a{width:100%;justify-content:center}}
@media (max-width:640px){.aibox>div:first-child{grid-template-columns:minmax(0,1fr)}.aibox>div:first-child .zk-slot>*,.aibox>div:first-child button{width:100%;justify-content:center}}
@media (max-width:900px){.pal{grid-template-columns:repeat(6,minmax(0,1fr))}.pal>.pal-i{grid-column:span var(--t,2)}}
@media (max-width:560px){.pal>.pal-i{grid-column:span var(--p,3)}.pal .sw .chip{height:96px}.pal .cp{padding:0 10px;font-size:12px}}
@media (max-width:640px){.tile.full .pv.fix{min-height:150px;padding:40px 8%}.tile.full .pv.fix>img{width:min(100%,340px)!important}}
@media (max-width:640px){
.mv-hero .bd{grid-template-columns:minmax(0,1fr)!important}
.mv-hero .bd>div,.mv-hero .bd>div:last-child{min-width:0;width:100%!important;justify-items:start!important}
.mv-hero .bd .mv-ctl{justify-self:start!important;align-self:start!important;width:100%;box-sizing:border-box}
.mv-hero .mv-ctl .btn{flex:1 1 0;min-width:0;padding:0 10px}
.mv-hero .bd .dls{justify-content:flex-start!important}
}
@media (max-width:640px){.hc-stage.hc-min{padding:44px 20px}}
@media (max-width:760px){.ccalc{grid-template-columns:minmax(0,1fr)}.cc-r{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.atalhos:not(.a3)>:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:640px){.atalhos.a3>:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:900px){.hero .stage.palco{min-height:0;aspect-ratio:1/1}.palco-logo{width:min(46%,240px)}}
@media (max-width:640px){.mv-side{justify-items:start;text-align:left}}
@media (max-width:900px){.eco{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.eco{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.fam{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.g3.one{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.g3.one{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.om-fam{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.bcs{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.arv-fs{grid-template-columns:minmax(0,1fr)}.arv-l{display:none}.arv{gap:12px}}
@media (max-width:900px){.fxl{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-rota{display:none}.fxl{padding-top:0}}
@media (max-width:480px){.fxl{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.hl-l{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.bp{--k:1.7}}
@media (max-width:640px){
  .bp-row{flex-wrap:wrap}.bp-xb{width:100%;justify-content:center}
  .bp-rc{display:none}
}
}