/* =====================================================================
   Genuo · site institucional · sistema v1 (fase 1)
   Fonte da marca: Brandbook_Genuo_v4.html (#componentes, #recursos, #aplicacoes)
   e DESIGN DNA v4.2. Documentação para a fase 2: assets/SISTEMA.md
   Ordem: 1 fontes · 2 tokens · 3 base · 4 gestos · 5 componentes ·
          6 cabeçalho · 7 dobras da home · 8 rodapé · 9 modal · 10 motion ·
          11 responsivo · 12 movimento reduzido
   ===================================================================== */

/* ---------- 1. FONTES LOCAIS (sem CDN) ---------- */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 2. TOKENS ---------- */
:root{
  /* cor de marca: três cores + neutros de aço (DNA · PALETA) */
  --navy:#172940;      /* tinta da gravação: texto, botão, base deslocada */
  --azul:#4D87D5;      /* identidade; nunca texto pequeno sobre claro */
  --azul-t:#2B5FA6;    /* azul em texto e rótulo (5,4:1 sobre aço) */
  --laranja:#FC8E3D;   /* o que vale agora: fio, chip vigente, base do botão. Nunca texto */
  --aco:#E6EBF1;       /* chapa da estante: fundo dominante */
  --gelo:#F2F5F8;      /* fundo da plataforma: fundo dominante */
  --folha:#F7F9FB;     /* face da etiqueta, cabeçalho, palco claro */
  --linha:#D3DAE3; --chip:#DCE3EB;
  --cz-escuro:#394456; /* texto corrido */
  --cz-t:#5E6778;      /* texto de apoio (4,7:1 sobre aço) */
  --cz-claro:#9DA4B7;  /* só traço e desenho, nunca texto */
  --navy-h:#22395A;    /* hover do botão primário */
  --gelo-t:#C9D0DC; --gelo-m:#B7BECD; --azul-claro:#9DB9E3; /* texto sobre navy */
  --erro:#BA3C40;      /* estado de erro (fora da paleta de marca) */

  /* tipografia (DNA · TIPOGRAFIA) */
  --f-display:"Figtree","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --t-hero:clamp(40px,5.6vw,80px);    /* H1: teto do gate de hero (80) */
  --t-display:clamp(96px,11vw,176px); /* número herói; salto de 3x+ sobre o título */
  --t-h2:clamp(34px,4.1vw,58px);      /* frase grande de cada dobra */
  --t-nome:clamp(40px,4.9vw,72px);    /* nome em destaque tipográfico (4 Passos) */
  --t-tit:36px;                       /* título de etiqueta e porta */
  --t-lead:clamp(19px,1.5vw,22px);
  --t-corpo:17px;
  --t-cap:14px;
  --t-mono:12.5px;
  --tr-display:-.045em;

  /* espaço (base 8, saltos no topo) */
  --e-1:8px; --e-2:16px; --e-3:24px; --e-4:40px; --e-5:64px; --e-6:104px;
  --gut:72px;              /* margem lateral da página */
  --largura:1296px;        /* coluna útil */
  --h-topo:72px;           /* altura do cabeçalho fixo */

  /* matéria (DNA · MATÉRIA) */
  --r-box:14px;            /* raio de container (tela, conversa, celular) */
  --r-ctl:0px;             /* controle: canto reto + chanfro */
  --sombra:0 1px 2px rgba(23,41,64,.10),0 22px 44px -20px rgba(23,41,64,.38);
  --sombra-escura:0 2px 4px rgba(5,12,22,.30),0 34px 60px -26px rgba(5,12,22,.62);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .09 0 0 0 0 .16 0 0 0 0 .25 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --estante:repeating-linear-gradient(90deg,rgba(23,41,64,.065) 0 2px,transparent 2px 240px); /* montantes: só na abertura */

  /* motion (DNA · MOTION): uma curva só */
  --ease:cubic-bezier(.22,.61,.36,1);
  --d-micro:180ms; --d-fio:900ms; --d-reveal:620ms; --d-stagger:90ms; --d-lista:420ms; --d-conta:1200ms;
}

/* ---------- 3. BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--f-display);font-size:var(--t-corpo);line-height:1.55;color:var(--navy);background:var(--gelo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
ul,ol{list-style:none}
::selection{background:var(--navy);color:var(--folha)}
:focus-visible{outline:3px solid var(--azul-t);outline-offset:3px}
[id]{scroll-margin-top:calc(var(--h-topo) + 16px)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.chanfro{clip-path:polygon(0 0,calc(100% - var(--cf,14px)) 0,100% var(--cf,14px),100% 100%,0 100%)}
.wrap{width:100%;max-width:calc(var(--largura) + var(--gut) * 2);margin:0 auto;padding:0 var(--gut)}
.b{display:block}
.pular{position:absolute;left:12px;top:-80px;z-index:100;background:var(--navy);color:var(--folha);font-weight:750;padding:12px 18px;text-decoration:none}
.pular:focus{top:12px}

/* fundos e matéria */
.bg-aco{background:var(--aco)} .bg-gelo{background:var(--gelo)} .bg-folha{background:var(--folha)}
.bg-navy{background:var(--navy);color:var(--gelo)}
.estante::before{content:"";position:absolute;inset:0;background-image:var(--estante);pointer-events:none}
.grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;pointer-events:none}
.bg-navy.grain::after{opacity:.07}

/* tipografia de sistema */
.rotulo{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-t)}
.rotulo::before{content:"";width:9px;height:9px;background:currentColor;flex:0 0 auto}
.bg-navy .rotulo{color:var(--azul-claro)}
.h2{font-size:var(--t-h2);font-weight:850;letter-spacing:var(--tr-display);line-height:.96}
.h2-c{text-align:center;margin-left:auto;margin-right:auto}
.lead{font-size:var(--t-lead);line-height:1.45;color:var(--cz-escuro);max-width:52ch}
.bg-navy .lead{color:var(--gelo-t)}
.texto{color:var(--cz-escuro);max-width:58ch}
.texto + .texto{margin-top:var(--e-2)}
.bg-navy .texto{color:var(--gelo-t)}
.bg-navy .et .texto{color:var(--cz-escuro)}
.bg-navy .et .lk{color:var(--azul-t)}
.nw{white-space:nowrap}
.lead,.terr-leg,.squad-destaque,.cel-cap{text-wrap:balance}
.nota{font-family:var(--f-mono);font-size:12px;color:var(--cz-t);letter-spacing:0}
.bg-navy .nota{color:var(--gelo-m)}

/* ---------- 4. GESTO 1 · a palavra pisa no fio laranja que vai à borda ---------- */
/* O pai (dobra) precisa de overflow:hidden/clip. .fio-e corre até a borda esquerda; .fio-d até a direita. */
.fio-e,.fio-d{position:relative;z-index:0;white-space:nowrap;display:inline-block;line-height:.9}
.fio-e::after,.fio-d::after{content:"";position:absolute;bottom:.045em;height:.095em;background:var(--laranja);z-index:-1;transform-origin:var(--o,left) center}
.fio-e::after{left:-3000px;right:-.02em;--o:right}
.fio-d::after{left:-.02em;right:-3000px}

/* ---------- 5. COMPONENTES ---------- */
/* 5.1 Etiqueta (GESTO 2): chanfro no canto superior direito, rótulo azul, código em mono, base navy deslocada */
.et-w{position:relative;--dx:8px}
.et-bd{position:absolute;inset:0;background:var(--navy);transform:translate(var(--dx),var(--dx))}
.et{position:relative;background:var(--folha);color:var(--navy);--cf:28px;padding:20px 44px 18px 20px}
.et .lb{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-t);display:inline-flex;align-items:center;gap:8px;line-height:1.3}
.et .lb i{width:9px;height:9px;background:var(--azul-t);display:inline-block;flex:0 0 auto}
.et .cd{display:block;font-family:var(--f-mono);font-weight:700;font-size:24px;margin-top:6px;letter-spacing:-.01em;line-height:1.15}
.et .cd.tx{font-family:var(--f-display);font-weight:850;letter-spacing:-.025em}
.et .ln{display:block;border-top:2px solid var(--navy);font-family:var(--f-mono);font-size:12.5px;color:var(--cz-escuro);margin-top:12px;padding-top:10px;line-height:1.5}
.et .ln b{color:var(--navy);font-weight:700}
.bg-navy .et-bd,.et-w.base-azul .et-bd{background:var(--azul)}

/* 5.2 Chips e selo */
.chip{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:750;line-height:1.2;padding:7px 18px 7px 12px;--cf:9px;color:var(--navy);background:var(--chip);white-space:nowrap}
.chip::before{content:"";width:9px;height:9px;background:var(--azul-t);flex:0 0 auto}
.chip.vig{background:var(--laranja)}
.chip.vig::before{background:var(--navy)}
.chip.sm{font-size:12px;padding:4px 12px 4px 8px;--cf:7px;gap:7px}
.chip.sm::before{width:7px;height:7px}
.selo{display:inline-flex;align-items:center;gap:12px;background:var(--navy);color:var(--gelo);padding:8px 26px 8px 8px;--cf:14px}
.selo img{width:38px;height:38px;background:var(--folha);padding:5px}
.selo b{font-size:16px;letter-spacing:-.01em;display:block;line-height:1.1}
.selo .mono{font-size:11.5px;color:var(--gelo-m)}

/* 5.3 Botões: primário, secundário, link (3 estados: normal, hover, foco) */
.bt{position:relative;isolation:isolate;display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--gelo);text-decoration:none;--anel-fundo:var(--gelo)}
.bt::before{content:"";position:absolute;inset:-7px;background:var(--azul-t);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);opacity:0;z-index:-2}
.bt::after{content:"";position:absolute;inset:-3px;background:var(--anel-fundo);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);opacity:0;z-index:-1}
.bt-f{position:relative;display:inline-flex;gap:14px;align-items:center;min-height:54px;padding:15px 44px 17px 24px;background:var(--navy);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);font-size:17px;font-weight:750;line-height:1.2}
.bt-f::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--laranja);transform:scaleX(.2);transform-origin:left;transition:transform .24s var(--ease)}
.bt:focus-visible{outline:none}
.bt:focus-visible::before,.bt:focus-visible::after{opacity:1}
.bt:focus-visible .bt-f::after{transform:scaleX(1)}
.bt:active .bt-f{transform:translateY(1px)}
/* secundário: contorno navy que acompanha o chanfro, sem laranja */
.bt.bt2{color:var(--navy)}
.bt.bt2 .bt-f{padding:2px;background:var(--navy)}
.bt.bt2 .bt-f::after{display:none}
.bt.bt2 .bt-i{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:13px 40px 15px 22px;background:var(--folha);clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)}
/* sobre fundo navy: primário em azul-texto, secundário invertido */
.bg-navy .bt{--anel-fundo:var(--navy)}
.bg-navy .bt .bt-f{background:var(--azul-t)}
/* tamanho compacto (cabeçalho) */
.bt.bt-p .bt-f{min-height:44px;padding:10px 32px 12px 16px;font-size:15px}
/* link */
.lk{display:inline-block;font-size:16px;font-weight:700;color:var(--azul-t);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;padding:12px 0}
.bg-navy .lk{color:var(--azul-claro)}
@media (hover:hover){
  .bt:hover .bt-f{background:var(--navy-h)}
  .bt:hover .bt-f::after{transform:scaleX(1)}
  .bt.bt2:hover .bt-f{background:var(--navy)}
  .bt.bt2:hover .bt-i{background:var(--chip)}
  .bg-navy .bt:hover .bt-f{background:#3769B0}
  .lk:hover{color:var(--navy);text-underline-offset:8px}
  .bg-navy .lk:hover{color:var(--gelo)}
  .bg-navy .et .lk:hover{color:var(--navy)}
}

/* 5.4 Divisor de dobra: aba de gaveta com fio navy até a borda */
.divisor{position:relative;display:flex;align-items:center;height:40px;overflow:hidden}
.divisor .aba{flex:0 0 auto;background:var(--navy);color:var(--gelo);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:9px 30px 9px 16px;--cf:12px;position:relative;z-index:1;line-height:1.35}
.divisor i{flex:1 1 auto;height:2px;background:var(--navy);transform-origin:left center}

/* 5.5 Mesa (tabela de dados): só fios horizontais, número à direita em mono tabular */
.mesa{width:100%;border-collapse:collapse;font-size:14.5px}
.mesa caption{text-align:left;caption-side:top;padding-bottom:14px}
.mesa caption b{display:block;font-size:18px;font-weight:850;letter-spacing:-.02em;line-height:1.2}
.mesa caption .mono{font-size:12.5px;color:var(--cz-escuro)}
.mesa th{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cz-t);text-align:left;padding:9px 12px 9px 0;border-bottom:2px solid var(--navy)}
.mesa td{padding:13px 12px 13px 0;border-bottom:1px solid var(--linha);vertical-align:middle}
.mesa .r{text-align:right}
.mesa td.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.mesa td b{font-weight:800}
.mesa th.ref{text-align:center}
.vr{width:132px;position:relative;height:24px}
.vr::before{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:var(--navy);margin-left:-1px}
.vr .bar{position:absolute;top:50%;height:12px;margin-top:-6px;background:var(--navy)}
.vr .bar.neg{right:50%;transform-origin:right center}
.vr .bar.pos{left:50%;margin-left:1px;transform-origin:left center;background:repeating-linear-gradient(135deg,var(--navy) 0 3px,var(--cz-claro) 3px 6px)}

/* 5.6 Campo de formulário: chanfro no campo; erro na cor de estado, nunca em laranja */
.campo{display:flex;flex-direction:column;gap:8px;min-width:0;border:0}
.campo .c-l{font-size:14.5px;font-weight:750;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.campo .c-l em{font-style:normal;font-family:var(--f-mono);font-size:11.5px;font-weight:500;color:var(--cz-t)}
.campo .c-f{display:block;background:var(--linha);padding:2px;--cf:12px}
.campo input,.campo textarea{display:block;width:100%;min-height:50px;border:0;background:var(--folha);padding:0 16px;font-size:16px;color:var(--navy);clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.campo textarea{min-height:120px;padding:14px 16px;resize:vertical;line-height:1.5}
.campo .c-f:focus-within{background:var(--azul-t);padding:3px}
.campo .c-h{font-size:13px;color:var(--cz-t);line-height:1.4}
.campo .c-e{font-size:13px;color:var(--erro);font-weight:700;line-height:1.4}
.campo.is-e .c-f{background:var(--erro)}
.campo.is-e .c-f:focus-within{background:var(--erro)}
/* escolha única (radio) em etiqueta */
.opcoes{display:flex;flex-wrap:wrap;gap:10px}
.opcao{position:relative;display:inline-flex;cursor:pointer}
.opcao input{position:absolute;opacity:0;width:1px;height:1px}
.opcao span{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 26px 10px 14px;background:var(--chip);color:var(--navy);font-size:15px;font-weight:700;line-height:1.25;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.opcao span::before{content:"";width:12px;height:12px;flex:0 0 auto;box-shadow:inset 0 0 0 2px var(--navy);background:var(--folha)}
.opcao input:checked + span{background:var(--navy);color:var(--folha)}
.opcao input:checked + span::before{background:var(--laranja);box-shadow:none}
.opcao input:focus-visible + span{outline:3px solid var(--azul-t);outline-offset:3px}
.campo.is-e .opcao span{box-shadow:inset 0 0 0 2px var(--erro)}
/* consentimento */
.aceite{display:flex;gap:14px;align-items:flex-start;min-height:44px;padding:10px 0;cursor:pointer;font-size:14.5px;line-height:1.45;color:var(--cz-escuro)}
.aceite input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:24px;height:24px;margin-top:1px;background:var(--folha);box-shadow:inset 0 0 0 2px var(--navy);cursor:pointer;position:relative}
.aceite input:checked{background:var(--navy)}
.aceite input:checked::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid var(--folha);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.aceite a{color:var(--azul-t);font-weight:700;text-underline-offset:3px}
.campo.is-e .aceite input{box-shadow:inset 0 0 0 2px var(--erro)}
.aceite input:focus-visible{outline:3px solid var(--azul-t);outline-offset:3px}
/* só uma caixa de consentimento por vez (contato ou candidato): o .campo é flex e venceria o [hidden] */
.campo[data-consentimento][hidden]{display:none}
/* 5.6b Anexo (currículo em PDF, só no perfil carreira). O input fica dentro do label, invisível e focável,
   cobrindo a caixa: clique e teclado abrem o seletor nativo; o .c-f acende no foco como os outros campos. */
.campo[data-campo="curriculo"][hidden]{display:none}
.c-arq{display:flex;flex-direction:column;gap:8px;cursor:pointer}
.c-arq-bt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 16px;background:var(--folha);color:var(--navy);font-size:15px;font-weight:700;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)}
.c-arq:hover .c-arq-bt{background:var(--gelo)}
.campo .c-arq-in{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;opacity:0;cursor:pointer;clip-path:none}
.c-arq-tag{font-family:var(--f-mono);font-size:11.5px;font-weight:500;color:var(--cz-t)}
.c-arq-linha{display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px}
.c-arq-linha[hidden]{display:none}
.c-arq-nome{min-width:0;font-family:var(--f-mono);font-size:13px;color:var(--navy);overflow-wrap:anywhere}
.c-arq-rm{min-height:44px;min-width:44px;padding:0 4px;border:0;background:none;color:var(--azul-t);font:inherit;font-size:14.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* 5.7 Tela reconstruída (moldura de navegador da plataforma) */
.tela{position:relative;background:var(--folha);border-radius:var(--r-box);box-shadow:var(--sombra);overflow:hidden}
.tela-bar{display:flex;align-items:center;gap:14px;height:46px;padding:0 20px;border-bottom:1px solid var(--linha);background:var(--folha)}
.tela-bar img{width:22px;height:22px}
.tela-bar .mono{font-size:12px;color:var(--cz-t);background:var(--gelo);padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tela-bar .pos{margin-left:auto}
.tela-corpo{padding:26px 30px 30px;background:var(--gelo)}

/* ---------- 6. CABEÇALHO FIXO ---------- */
/* sombra ao rolar no próprio .topo: o antigo ::after de 18px fora da caixa virava camada própria e o Chrome deixava pixels velhos nela na volta ao topo */
.topo{position:sticky;top:0;z-index:60;background:var(--folha);box-shadow:0 16px 24px -16px rgba(23,41,64,0);transition:box-shadow var(--d-micro) var(--ease)}
.topo.is-rolado{box-shadow:0 16px 24px -16px rgba(23,41,64,.2)}
.topo-in{display:flex;align-items:center;gap:28px;height:var(--h-topo);border-bottom:1px solid var(--linha)}
.topo-logo{display:block;flex:0 0 auto;margin-left:-14px}
.topo-logo img{width:152px;height:auto}
.topo-nav{margin-left:8px}
.topo-nav ul{display:flex;gap:4px}
.topo-nav a{position:relative;display:block;padding:12px 12px;font-size:15px;font-weight:650;color:var(--cz-escuro);text-decoration:none;line-height:1.2}
.topo-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;background:var(--laranja);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease)}
.topo-nav a[aria-current="page"]{color:var(--navy);font-weight:800}
.topo-nav a[aria-current="page"]::after{transform:scaleX(1)}
.topo-acoes{display:flex;align-items:center;gap:20px;margin-left:auto}
.idioma{display:flex;align-items:center;gap:2px;font-family:var(--f-mono);font-size:12.5px;font-weight:700}
.idioma span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;padding:0 6px}
.idioma .on{background:var(--navy);color:var(--folha);--cf:7px}
.idioma .off{color:var(--cz-claro);cursor:not-allowed}
.topo-entrar{font-size:15px;font-weight:750;color:var(--navy);text-decoration:none;padding:12px 4px;text-decoration-thickness:2px;text-underline-offset:6px}
.topo-menu{display:none;position:relative;width:48px;height:48px;border:0;background:var(--navy);cursor:pointer;--cf:10px;margin-right:-6px}
.topo-menu i{position:absolute;left:14px;right:14px;height:2px;background:var(--folha);transition:transform var(--d-micro) var(--ease),opacity var(--d-micro) var(--ease)}
.topo-menu i:nth-child(2){top:19px}
.topo-menu i:nth-child(3){top:27px;right:20px}
.topo-menu[aria-expanded="true"] i:nth-child(2){transform:translateY(4px) rotate(45deg)}
.topo-menu[aria-expanded="true"] i:nth-child(3){transform:translateY(-4px) rotate(-45deg);right:14px}
@media (hover:hover){
  .topo-nav a:hover{color:var(--navy)}
  .topo-nav a:hover::after{transform:scaleX(1)}
  .topo-entrar:hover{text-decoration:underline}
}
/* menu móvel */
.menu-movel{position:fixed;left:0;right:0;top:var(--h-topo);bottom:0;z-index:59;background:var(--folha);overflow-y:auto;padding:24px var(--gut) calc(40px + env(safe-area-inset-bottom))}
.menu-movel[hidden]{display:none}
.menu-movel ul{border-top:2px solid var(--navy)}
.menu-movel li a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--linha);font-size:26px;font-weight:850;letter-spacing:-.03em;text-decoration:none;color:var(--navy)}
.menu-movel .mm-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:32px}
.menu-movel .idioma{margin-top:32px}
body.menu-aberto{overflow:hidden}

/* ---------- 7. DOBRAS DA HOME ---------- */
.dobra{position:relative;overflow:hidden;padding:var(--e-6) 0}
@supports (overflow:clip){.dobra{overflow:clip}}

/* 7.1 Hero (abertura: única dobra com montantes) */
.hero{background:var(--aco)}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--estante);background-position:-18px 0;pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:40px;align-items:center;min-height:calc(min(100svh,960px) - var(--h-topo));padding-top:48px;padding-bottom:56px}
.hero{padding:0}
.hero-txt{position:relative;z-index:1}
.hero-h1{font-size:var(--t-hero);font-weight:850;letter-spacing:-.05em;line-height:.94;margin-top:22px}
.hero-sub{font-size:var(--t-lead);line-height:1.45;color:var(--cz-escuro);max-width:34ch;margin-top:26px;font-weight:500}
.hero-acts{display:flex;flex-wrap:wrap;gap:16px 20px;margin-top:34px}
.hero-apoio{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:16px;border-top:2px solid var(--navy);max-width:600px}
.hero-apoio li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:650;color:var(--cz-escuro);line-height:1.3}
.hero-apoio li::before{content:"";width:8px;height:8px;background:var(--azul-t);flex:0 0 auto}
.hero-vis{position:relative;z-index:2;margin-right:calc(var(--gut) * -1);padding:20px 0 150px 36px}
.hero-vis .tela{border-radius:var(--r-box) 0 0 var(--r-box)}
.hero-vis .tela-corpo{padding:26px 36px 104px 30px}
.hero-vis .mesa{max-width:600px}
.hero-ficha{position:absolute;left:-6px;bottom:0;width:min(372px,62%);--dx:9px;transform:rotate(1.2deg);transform-origin:left bottom;z-index:3}
.hero-ficha .et{--cf:36px;padding:0 30px 24px}
.ficha-top{display:flex;margin-left:-30px}
.ficha-top .chip{--cf:0px;padding:7px 14px 7px 12px}
.ficha-nm{font-size:20px;font-weight:800;margin-top:18px;line-height:1.2;letter-spacing:-.01em}
.ficha .cd{font-size:24px;margin-top:8px}
.ficha-rw{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--linha);margin-top:12px;padding-top:10px;font-size:13.5px;color:var(--cz-escuro);line-height:1.35}
.ficha-rw b{color:var(--navy);text-align:right;font-weight:750}
.hero-nota{position:absolute;right:var(--gut);bottom:26px;z-index:3}

/* 7.2 Território entre as empresas (diagrama que sangra as duas bordas) */
.terr{background:var(--gelo)}
.terr-txt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;margin-top:48px;align-items:start}
.terr-txt .lead{color:var(--navy);font-weight:500;max-width:40ch}
.terr-dg{display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(0,500px) 88px minmax(0,1fr);align-items:stretch;margin:80px calc(50% - 50vw) 0;min-height:330px}
.terr-lado{position:relative;display:flex;align-items:center;padding:48px 36px;background:var(--aco) repeating-linear-gradient(135deg,rgba(23,41,64,.07) 0 1.5px,transparent 1.5px 13px)}
.terr-lado.esq{justify-content:flex-end;border-right:2px solid var(--navy)}
.terr-lado.dir{justify-content:flex-start;border-left:2px solid var(--navy)}
.terr-lado .et-w{width:min(100%,300px)}
.terr-cx{align-self:center;position:relative;height:2px;background:var(--navy)}
.terr-cx::after{content:"";position:absolute;top:-6px;border-top:7px solid transparent;border-bottom:7px solid transparent}
.terr-cx.esq{transform-origin:left center}
.terr-cx.esq::after{right:-1px;border-left:12px solid var(--navy)}
.terr-cx.dir{transform-origin:right center}
.terr-cx.dir::after{left:-1px;border-right:12px solid var(--navy)}
.terr-meio{position:relative;display:flex;align-items:center;justify-content:center;padding:48px 0;border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.campo-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.terr-meio .et-w{position:relative;z-index:1;width:min(100%,360px);--dx:10px}
.terr-meio .et{--cf:40px;padding:24px 56px 22px 24px}
.terr-meio .cd{font-size:48px;margin-top:6px}
.terr-leg{text-align:center;margin:28px auto 0;max-width:56ch;font-size:15px;color:var(--cz-escuro)}

/* 7.3 As duas portas (navy; a porta do vendedor invade a dobra seguinte) */
.portas{position:relative;z-index:2;overflow:visible;padding-bottom:var(--e-5)}
.portas .h2{max-width:20ch}
.portas-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:72px;align-items:start}
.porta{--dx:10px}
.porta .et{--cf:52px;padding:0 0 32px}
.porta .divisor{margin-right:52px}
.porta-corpo{padding:28px 36px 0}
.porta-t{font-size:var(--t-tit);font-weight:850;letter-spacing:-.035em;line-height:1.05}
.porta-corpo .texto{margin-top:14px;max-width:46ch}
.porta-ui{margin-top:26px;padding:18px 20px 16px;background:var(--gelo);box-shadow:inset 0 0 0 1px var(--linha)}
.porta-ui .mesa{font-size:13.5px}
.porta-ui .mesa caption{padding-bottom:10px}
.porta-ui .mesa caption b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-t);font-weight:800}
.porta-ui .mesa td{padding:10px 10px 10px 0}
.devol{display:grid;grid-template-columns:auto 1fr;gap:0 18px;font-size:14px}
.devol dt{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cz-t);padding:11px 0;border-bottom:1px solid var(--linha)}
.devol dd{padding:9px 0;border-bottom:1px solid var(--linha);text-align:right;font-weight:750}
.devol dd .mono{font-size:15px}
.devol-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--navy)}
.devol-h b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-t);font-weight:800}
.porta-corpo .lk{margin-top:14px}
.porta.vend{margin-top:120px;margin-bottom:-150px}
.portas-frase{margin-top:48px;font-size:clamp(22px,2vw,28px);font-weight:750;letter-spacing:-.02em;line-height:1.25;color:var(--gelo);max-width:26ch}

/* 7.4 Os 4 Passos Geniais (lista única, trilho que se desenha) */
.passos{position:relative;z-index:1;background:var(--folha);padding-top:calc(var(--e-6) + 56px)}
.passos-sub{text-align:center;margin:22px auto 0;max-width:52ch}
.passos-lista{position:relative;margin-top:72px;padding-left:64px;counter-reset:passo}
.passos-lista::before{content:"";position:absolute;left:11px;top:48px;bottom:48px;width:2px;background:var(--navy);transform-origin:center top}
.passo{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 56px;padding:44px 0;border-top:1px solid var(--linha)}
.passo:last-child{border-bottom:1px solid var(--linha)}
.passo::before{content:"";position:absolute;left:-60px;top:62px;width:18px;height:18px;background:var(--folha);box-shadow:inset 0 0 0 2px var(--navy)}
.passo.hum::before{background:var(--navy)}
.passo-nome{font-size:var(--t-nome);font-weight:850;letter-spacing:var(--tr-display);line-height:.95}
.passo-corpo .texto{font-size:18px;max-width:54ch}
.passo-art{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px 40px;margin-top:26px}
.n48{display:flex;align-items:flex-end;gap:14px}
.n48-n{font-size:var(--t-display);font-weight:850;letter-spacing:-.06em;line-height:.8;font-variant-numeric:tabular-nums;min-width:1.2ch;display:inline-block}
.n48-u{font-family:var(--f-mono);font-weight:700;font-size:20px;padding-bottom:8px}
.n48-f{font-family:var(--f-mono);font-size:12.5px;color:var(--cz-escuro);border-top:2px solid var(--navy);margin-top:14px;padding-top:8px}
.passo-art .et-w{width:min(100%,280px);--dx:7px}
.rastro{width:min(100%,520px);border-top:2px solid var(--navy)}
.rastro li{display:grid;grid-template-columns:62px 118px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--linha);align-items:baseline;font-size:14.5px;color:var(--cz-escuro)}
.rastro .h{font-family:var(--f-mono);font-weight:700;font-size:15px;color:var(--navy)}
.rastro .q{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-t)}
.rastro-cap{margin-top:10px}
.passos-cta{margin-top:40px;padding-left:64px}

/* 7.5 Squad Genuo (editorial + conversa reconstruída) */
.squad{background:var(--aco)}
.squad-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;margin-top:48px;align-items:start}
.squad-grid .lead{color:var(--navy)}
.squad-grid .texto{margin-top:22px}
.conversa{position:relative;z-index:2;background:var(--folha);border-radius:var(--r-box);box-shadow:var(--sombra);overflow:hidden}
.conversa-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:16px 24px;border-bottom:1px solid var(--linha)}
.conversa-h .rotulo{font-size:12px}
.conversa-h .mono{font-size:12px;color:var(--cz-t)}
.conversa-c{padding:26px 24px 28px;background:var(--gelo);display:flex;flex-direction:column;gap:16px}
.msg{max-width:84%}
.msg .quem{display:flex;gap:10px;align-items:baseline;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-t)}
.msg .quem .mono{font-size:12px;letter-spacing:0;color:var(--cz-t);font-weight:500;text-transform:none}
.msg p{margin-top:6px;padding:12px 16px;background:var(--folha);box-shadow:inset 3px 0 0 var(--azul-t),0 1px 2px rgba(23,41,64,.08);font-size:15px;line-height:1.45;color:var(--navy)}
.msg.eu{align-self:flex-end}
.msg.eu .quem{justify-content:flex-end;color:var(--cz-escuro)}
.msg.eu p{background:var(--chip);box-shadow:none}
.msg-evento{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:6px}
.msg-evento .mono{font-size:12px;color:var(--cz-t)}
.dec{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:var(--folha);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:7px 18px 7px 10px;--cf:8px}
.dec::before{content:"";width:8px;height:8px;background:var(--laranja)}
.squad-destaque{margin-top:72px;font-size:clamp(34px,4.6vw,66px);font-weight:850;letter-spacing:var(--tr-display);line-height:.98;max-width:20ch}
.squad .nota{margin-top:12px}

/* 7.6 Integração opcional (diagrama em árvore + celular que invade a faixa) */
.integ{background:var(--gelo);padding-bottom:0}
.integ-txt{text-align:center;margin:24px auto 0;max-width:58ch}
.integ-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;margin-top:72px;position:relative;z-index:2}
.arv{position:relative;padding-bottom:12px}
.arv-topo{display:flex;justify-content:center}
.arv-topo .et-w{width:min(100%,330px);--dx:10px}
.arv-topo .et{--cf:36px;padding:22px 48px 20px 22px;display:flex;gap:16px;align-items:center}
.arv-topo img{width:44px;height:44px;flex:0 0 auto}
.arv-topo .cd{font-size:30px;margin-top:4px}
.arv-haste{width:2px;height:44px;margin:10px auto 0;background:var(--navy);transform-origin:center top}
.arv-barra{position:relative;height:2px;margin:0 25%;background:var(--navy)}
.arv-ramos{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ramo{display:flex;flex-direction:column;align-items:center}
.ramo-l{position:relative;width:2px;height:92px;background:linear-gradient(var(--navy) 0 30px,transparent 30px 62px,var(--navy) 62px);transform-origin:center top}
.ramo-l::before{content:"";position:absolute;left:50%;top:30px;width:22px;height:32px;margin-left:-11px;box-shadow:inset 0 0 0 2px var(--navy);background:var(--gelo)}
.ramo-l::after{content:"";position:absolute;left:50%;bottom:-1px;margin-left:-7px;border-top:12px solid var(--navy);border-left:7px solid transparent;border-right:7px solid transparent}
.ramo .et-w{width:100%;--dx:7px}
.ramo .et-bd{background:var(--cz-claro)}
.ramo .et{--cf:24px;padding:16px 36px 16px 16px;box-shadow:inset 0 0 0 1px var(--linha)}
.ramo .cd{font-size:19px;line-height:1.2}
.arv-chip{position:absolute;left:50%;top:0;transform:translate(-50%,-50%)}
.cel-w{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:-120px}
.cel{width:272px;padding:12px;background:var(--navy);border-radius:var(--r-box);box-shadow:var(--sombra)}
.cel-t{background:var(--folha);border-radius:4px;overflow:hidden}
.cel-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--linha)}
.cel-bar img{width:18px;height:18px}
.cel-bar .mono{font-size:10.5px;color:var(--cz-t)}
.cel-c{padding:16px 14px 18px;background:var(--gelo)}
.cel-c .ficha-nm{font-size:15px;margin-top:0}
.cel-c .mono.sm{display:block;font-size:10.5px;color:var(--cz-escuro);margin-top:4px}
.cel-l{margin-top:12px;border-top:2px solid var(--navy)}
.cel-l li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--linha);font-size:13px}
.cel-l li b{font-weight:800}
.cel-l .mono{font-size:12.5px}
.cel-l .v{font-family:var(--f-mono);font-size:11.5px;color:var(--cz-escuro);min-width:48px;text-align:right}
.cel-b{display:block;margin-top:14px;background:var(--navy);color:var(--folha);text-align:center;font-size:13px;font-weight:750;padding:11px;--cf:9px;position:relative}
.cel-b::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:20%;background:var(--laranja)}
.cel-cap{margin-top:18px;text-align:center;max-width:30ch;font-size:15px;color:var(--cz-escuro)}
/* faixa curta: o que estamos construindo (sem destaque visual) */
.obra{position:relative;z-index:1;background:var(--folha);margin-top:0;padding:168px 0 64px}
.obra-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;border-top:2px solid var(--navy);padding-top:22px}
.obra-t{font-size:15px;font-weight:800;letter-spacing:.02em}
.obra .texto{max-width:62ch}

/* 7.7 Onde operamos (navy + plaquetas de país) */
.onde-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;margin-top:56px;align-items:start}
.onde-grid .lead{color:var(--gelo)}
.paises{position:relative;display:flex;flex-direction:column;gap:0;padding-left:24px}
.pais{width:min(100%,460px);--dx:10px}
.pais .et{--cf:48px;padding:26px 64px 24px 26px;display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:end}
.pais .cod{grid-row:1 / span 3;font-family:var(--f-mono);font-weight:800;font-size:clamp(64px,7vw,104px);line-height:.8;letter-spacing:-.04em}
.pais .ln{grid-column:2;margin-top:10px}
.pais .nm{font-size:30px;font-weight:850;letter-spacing:-.03em;line-height:1}
.pais .chip{justify-self:start;margin-top:6px}
.pais.br{margin-left:auto;margin-top:0}
.pais.br .et{background:var(--gelo)}
.pais.br .cod{color:var(--cz-t)}
.pais.br .et-bd{background:var(--gelo-m)}
.paises-cx{display:block;width:min(280px,58%);height:auto;margin:14px 0 14px 112px;overflow:visible}

/* 7.8 Chamada e formulário (#contato) */
.contato{background:var(--aco)}
.contato-sub{text-align:center;margin:22px auto 0;max-width:46ch}
.contato-acts{display:flex;justify-content:center;margin-top:36px}
.contato-base{display:grid;grid-template-columns:minmax(0,5fr) 140px minmax(0,5fr);gap:0 28px;align-items:end;margin-top:88px;padding-top:40px;border-top:2px solid var(--navy)}
.contato-lig{width:140px;height:180px;transform-origin:left center}
.perfis li{display:flex}
.perfis .perfil-b{width:100%}
.perfis .rotulo{margin-bottom:18px}
.perfis ul{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.perfil-b{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:12px 40px 12px 16px;border:0;background:var(--folha);color:var(--navy);font-size:18px;font-weight:750;cursor:pointer;--cf:12px;box-shadow:inset 0 0 0 2px var(--navy);position:relative;text-align:left}
.perfil-b::before{content:"";width:12px;height:12px;background:var(--azul-t);flex:0 0 auto}
.perfil-b:focus-visible{outline:3px solid var(--azul-t);outline-offset:4px}
.perfis li:nth-child(2){margin-left:28px}
.perfis li:nth-child(3){margin-left:56px}
.contato-et{justify-self:start;width:min(100%,440px);--dx:10px;margin-bottom:-10px}
.contato-et .et{--cf:48px;padding:28px 64px 26px 28px}
.contato-et .cd{font-size:clamp(18px,1.7vw,23px);margin-top:12px;word-break:break-word}
.contato-et .tel{display:block;font-family:var(--f-mono);font-weight:700;font-size:18px;margin-top:6px}
@media (hover:hover){
  .perfil-b:hover{background:var(--chip)}
}

/* ---------- 8. RODAPÉ ÚNICO ---------- */
.rodape{position:relative;background:var(--navy);color:var(--gelo);padding:88px 0 calc(40px + env(safe-area-inset-bottom))}
.rod-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
.rod-logo img{width:196px;height:auto;margin-left:-20px}
.rod-ass{font-size:clamp(26px,2.6vw,36px);font-weight:850;letter-spacing:-.035em;line-height:1.05;margin-top:18px;max-width:18ch}
.rod-desc{color:var(--gelo-t);margin-top:14px;max-width:40ch;font-size:15.5px}
.rod-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.rod-cols h2{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-claro);padding-bottom:12px;border-bottom:2px solid rgba(242,245,248,.22)}
.rod-cols ul{margin-top:8px}
.rod-cols a,.rod-cols button{display:inline-block;padding:9px 0;font-size:15.5px;font-weight:600;color:var(--gelo);text-decoration:none;border:0;background:none;cursor:pointer;text-align:left;text-decoration-thickness:2px;text-underline-offset:5px}
.rod-base{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;margin-top:72px;padding-top:24px;border-top:1px solid rgba(242,245,248,.18);font-size:13.5px;color:var(--gelo-m);line-height:1.7}
.rod-base .mono{font-size:12.5px}
.rod-base a{color:var(--gelo);text-underline-offset:3px}
.rod-idioma{display:flex;gap:18px;justify-content:flex-end;align-items:flex-start;flex-wrap:wrap}
.rod-idioma span{font-weight:700}
.rod-idioma .on{color:var(--gelo)}
.rod-idioma .off{color:#8791A5;cursor:not-allowed}
.rod-final{margin-top:18px;font-size:13px;color:var(--gelo-m)}
.rod-nota{margin-top:18px;font-size:13px;color:var(--gelo-m)}
.rod-nota+.rod-final{margin-top:4px}
@media (hover:hover){
  .rod-cols a:hover,.rod-cols button:hover{text-decoration:underline;color:var(--folha)}
}

/* ---------- 9. MODAL DO FORMULÁRIO (S3) ---------- */
.modal{border:0;padding:0;background:transparent;color:var(--navy);width:min(760px,calc(100% - 32px));max-width:none;max-height:none;margin:auto;overflow:visible}
.modal::backdrop{background:rgba(15,27,43,.78)}
.modal[open]{animation:modal-entra var(--d-reveal) var(--ease)}
@keyframes modal-entra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.modal-et{position:relative;--dx:10px}
.modal-et > .et-bd{background:var(--azul)}
.modal-face{position:relative;background:var(--folha);--cf:56px;max-height:calc(100svh - 48px);overflow-y:auto;overscroll-behavior:contain;padding:40px 48px 40px}
.modal-fechar{position:absolute;right:62px;top:22px;width:44px;height:44px;border:0;background:var(--chip);cursor:pointer;z-index:2}
.modal-fechar i{position:absolute;left:12px;right:12px;top:21px;height:2px;background:var(--navy)}
.modal-fechar i:first-child{transform:rotate(45deg)}
.modal-fechar i:last-child{transform:rotate(-45deg)}
.modal-t{font-size:clamp(28px,3.4vw,40px);font-weight:850;letter-spacing:-.04em;line-height:1;max-width:14ch;padding-right:40px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;margin-top:30px}
.form .full{grid-column:1 / -1}
.form fieldset.campo{padding:0}
.form legend.c-l{padding:0;margin-bottom:10px}
.form-envio{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.form-envio .bt{--anel-fundo:var(--folha)}
.form-envio .bt[disabled]{cursor:progress}
.form-envio .bt[disabled] .bt-f{background:var(--navy-h)}
.form-falha{padding:14px 18px;background:#F8E9EA;box-shadow:inset 4px 0 0 var(--erro);color:#7E2328;font-size:14.5px;font-weight:650;line-height:1.45}
.form-falha[hidden]{display:none}
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.modal-ok{padding:24px 0 8px}
.modal-ok[hidden]{display:none}
.modal-ok .texto{margin-top:18px;font-size:18px}
.modal-ok .bt{margin-top:32px}
.modal-ok .divisor{margin:0 -48px 28px 0}

/* ---------- 10. MOTION (kit da marca; a classe .in chega pelo observer do site.js) ---------- */
/* Tudo abaixo só vale com JS ativo (html.js). Sem JS, a página já está no estado final. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease);transition-delay:calc(var(--i,0) * var(--d-stagger))}
.js .rv.in{opacity:1;transform:none}
/* fio: 900ms, 250ms depois da frase (--fi soma atraso por linha) */
.js .draw .fio-e::after,.js .draw .fio-d::after{transform:scaleX(0);transition:transform var(--d-fio) var(--ease);transition-delay:calc(250ms + var(--fi,0ms))}
.js .draw.in .fio-e::after,.js .draw.in .fio-d::after{transform:scaleX(1)}
/* divisor: o fio corre até a borda */
.js .cena .divisor i,.js .divisor.draw i{transform:scaleX(0);transition:transform var(--d-fio) var(--ease) .25s}
.js .cena.in .divisor i,.js .divisor.draw.in i{transform:scaleX(1)}
/* cascata de lista: 420ms, 12px, até seis itens */
.js .cena .a-lista{opacity:0;transform:translateY(12px);transition:opacity var(--d-lista) var(--ease),transform var(--d-lista) var(--ease);transition-delay:calc(var(--i,0) * var(--d-stagger) + var(--base,0ms))}
.js .cena.in .a-lista{opacity:1;transform:none}
/* peças de diagrama que sobem (etapa) */
.js .cena .a-up{opacity:0;transform:translateY(22px);transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease);transition-delay:calc(var(--i,0) * var(--d-stagger))}
.js .cena.in .a-up{opacity:1;transform:none}
/* conectores que se desenham */
.js .cena .a-cx{transform:scaleX(0);transition:transform var(--d-lista) var(--ease);transition-delay:calc(var(--i,0) * var(--d-stagger) + 180ms)}
.js .cena.in .a-cx{transform:scaleX(1)}
.js .cena .a-cy{transform:scaleY(0);transition:transform var(--d-lista) var(--ease);transition-delay:calc(var(--i,0) * var(--d-stagger) + 180ms)}
.js .cena.in .a-cy{transform:scaleY(1)}
/* trilho dos 4 Passos: 1.200ms */
.js .passos-lista.cena::before{transform:scaleY(0);transition:transform 1200ms var(--ease) .1s}
.js .passos-lista.cena.in::before{transform:scaleY(1)}
/* barras da mesa */
.js .cena .vr .bar{transform:scaleX(0);transition:transform var(--d-reveal) var(--ease);transition-delay:calc(var(--i,0) * var(--d-stagger) + 200ms)}
.js .cena.in .vr .bar{transform:scaleX(1)}
/* hover de etiqueta clicável: a face sobe 3px e a base aparece mais */
.et-link .et,.et-link .et-bd{transition:transform var(--d-micro) var(--ease)}
@media (hover:hover){
  .et-link:hover .et{transform:translate(-3px,-3px)}
  .et-link:hover .et-bd{transform:translate(calc(var(--dx) + 3px),calc(var(--dx) + 3px))}
}

/* ---------- 11. RESPONSIVO ---------- */
@media (max-width:1240px){
  .topo-nav{display:none}
  .topo-menu{display:block}
  .topo-acoes .idioma,.topo-acoes .topo-entrar{display:none}
}
@media (max-width:1100px){
  :root{--gut:40px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:24px;min-height:0;padding-top:56px}
  .hero-vis{padding-left:0;max-width:760px}
  .terr-dg{grid-template-columns:minmax(0,1fr) 48px minmax(0,380px) 48px minmax(0,1fr)}
  .terr-lado{padding:36px 20px}
  .squad-grid,.onde-grid,.contato-base,.integ-grid{grid-template-columns:minmax(0,1fr)}
  .contato-base{gap:40px}
  .contato-lig{display:none}
  .contato-et{justify-self:start;margin-bottom:0}
  .cel-w{margin-bottom:-96px}
  .rod-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .terr-txt{grid-template-columns:minmax(0,1fr);gap:18px}
  .terr-dg{grid-template-columns:minmax(0,1fr);margin-top:56px}
  .terr-lado{padding:32px var(--gut);justify-content:flex-start!important;border:0!important}
  .terr-lado.esq{border-bottom:2px solid var(--navy)!important}
  .terr-lado.dir{border-top:2px solid var(--navy)!important;justify-content:flex-end!important}
  .terr-cx{width:2px;height:48px;justify-self:center}
  .terr-cx.esq{transform-origin:center top}
  .terr-cx.dir{transform-origin:center bottom}
  .terr-cx.esq::after{right:auto;left:-6px;top:auto;bottom:-1px;border:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid var(--navy)}
  .terr-cx.dir::after{left:-6px;top:-1px;border:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--navy)}
  .js .terr-dg .a-cx{transform:scaleY(0)}
  .js .terr-dg.in .a-cx{transform:scaleY(1)}
  .terr-meio{padding:32px var(--gut);border-left:0;border-right:0}
  .portas-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .porta.vend{margin-top:0;margin-bottom:-110px}
  .passos-lista{padding-left:40px}
  .passo{grid-template-columns:minmax(0,1fr);gap:14px}
  .passo::before{left:-40px;top:58px;width:14px;height:14px}
  .passos-lista::before{left:6px}
  .passos-cta{padding-left:40px}
  .obra-in{grid-template-columns:minmax(0,1fr);gap:10px}
  .rod-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rod-base{grid-template-columns:minmax(0,1fr)}
  .rod-idioma{justify-content:flex-start}
}
@media (max-width:600px){
  :root{--gut:22px;--h-topo:64px;--e-6:80px}
  .topo-in{gap:12px}
  .topo-logo{margin-left:-10px}
  .topo-logo img{width:124px}
  .topo-acoes{gap:12px}
  .bt.bt-p .bt-f{padding:10px 26px 12px 14px;font-size:14.5px}
  .hero-grid{padding-top:30px;padding-bottom:40px}
  .hero-h1{margin-top:16px}
  .hero-sub{margin-top:18px;font-size:18px}
  .hero-acts{margin-top:24px;gap:10px;flex-wrap:nowrap}
  .hero-acts .bt-f{min-height:50px;padding:13px 30px 15px 16px;font-size:16px}
  .hero-acts .bt.bt2 .bt-f{padding:2px}
  .hero-acts .bt.bt2 .bt-i{min-height:46px;padding:11px 28px 13px 14px}
  .hero-apoio{margin-top:24px;gap:8px 18px;padding-top:12px}
  .hero-apoio li{font-size:13.5px}
  .hero-vis{margin:4px 0 0;padding:0 0 30px}
  .hero-vis .tela{display:none}
  .hero-ficha{position:relative;left:auto;bottom:auto;width:calc(100% - 20px);transform:rotate(1.2deg)}
  .hero-ficha .et{padding:0 24px 18px}
  .ficha-top{margin-left:-24px}
  .ficha-nm{font-size:17px;margin-top:14px}
  .ficha .cd{font-size:20px;margin-top:4px}
  .ficha-rw + .ficha-rw{display:none}
  .hero-nota{right:var(--gut);bottom:14px}
  .tela-bar .pos{display:none}
  .terr-meio .cd{font-size:38px}
  .porta .et{--cf:36px}
  .porta .divisor{margin-right:36px}
  .porta-corpo{padding:22px 20px 0}
  .porta-t{font-size:30px}
  .porta-ui{padding:14px 12px 12px}
  .porta-ui .mesa{font-size:12.5px}
  .n48-u{font-size:16px}
  .rastro li{grid-template-columns:50px minmax(0,1fr);gap:4px 10px}
  .rastro li .o{grid-column:2}
  .msg{max-width:94%}
  .conversa-c{padding:20px 14px 22px}
  .conversa-h{padding:14px 16px}
  .arv-ramos{gap:14px}
  .ramo .et{padding:14px 26px 14px 12px}
  .ramo .cd{font-size:16px}
  .arv-barra{margin:0 24%}
  .obra{padding-top:132px}
  .paises{padding-left:0}
  .pais .et{padding:22px 48px 20px 20px;gap:4px 16px}
  .pais .nm{font-size:24px}
  .paises-cx{margin-left:56px;width:calc(100% - 120px);height:64px}
  .perfis li:nth-child(n){margin-left:0}
  .perfil-b{font-size:16px}
  .modal{width:calc(100% - 16px)}
  .modal-face{--cf:36px;padding:28px 20px 28px;max-height:calc(100svh - 24px)}
  .modal-fechar{right:40px;top:14px}
  .form{grid-template-columns:minmax(0,1fr);gap:20px}
  .modal-ok .divisor{margin-right:-20px}
  .rod-cols{grid-template-columns:minmax(0,1fr);gap:24px}
}

/* ---------- 12. MOVIMENTO REDUZIDO: tudo no estado final ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .cena .a-up,.js .cena .a-lista{opacity:1!important;transform:none!important;transition:none!important}
  .js .draw .fio-e::after,.js .draw .fio-d::after,.js .cena .divisor i,.js .divisor.draw i,
  .js .cena .a-cx,.js .cena .a-cy,.js .passos-lista.cena::before,.js .cena .vr .bar{transform:none!important;transition:none!important}
  .bt-f::after,.topo,.topo-nav a::after,.topo-menu i,.et-link .et,.et-link .et-bd{transition:none!important}
  .modal[open]{animation:none}
}
@media print{
  .topo,.modal,.menu-movel{display:none!important}
  .js .rv,.js .cena .a-up,.js .cena .a-lista{opacity:1!important;transform:none!important}
}

/* ---------- 13. HOME v3 (calibragem S8: menos por dobra, desenhos sem jargão) ----------
   Só acréscimo: classes novas com prefixo hm-. Nenhuma classe anterior foi apagada ou renomeada,
   e as dobras antigas da home (terr, portas, passos, squad, integ, onde, contato) seguem aqui para referência. */

/* 13.0 Campo de lista (select) no formulário: mesmo desenho do input */
.campo select{display:block;width:100%;min-height:50px;border:0;border-radius:0;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;
  background:var(--folha) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23172940' stroke-width='2'/></svg>") no-repeat right 34px center / 12px 8px;
  padding:0 60px 0 16px;font-size:16px;color:var(--navy);clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)}
.campo select:invalid{color:var(--cz-t)}
.campo select option{color:var(--navy)}
.hm-ok-fio{margin:0 -48px 28px 0}

/* 13.1 Hero: sem rótulo, sem ficha sobreposta; uma tela limpa, que fica também no celular */
.hm-hero .hero-h1{margin-top:0}
.hm-hero .hero-sub{max-width:36ch}
.hm-hero .hero-vis{padding:0 0 0 36px}
.hm-hero .hero-vis .tela-corpo{padding:30px 44px 26px 34px}
.hm-comp{max-width:640px;font-size:15px}
.hm-comp caption{padding-bottom:18px}
.hm-comp caption b{font-size:21px}
.hm-comp .hm-ref{display:flex;align-items:baseline;gap:12px;margin-top:10px;font-size:14.5px;font-weight:650;color:var(--cz-escuro)}
.hm-comp .hm-ref .mono{font-size:15px;font-weight:700;color:var(--navy)}
.hm-comp td{padding:17px 14px 17px 0}
.hm-comp .vr{width:200px}
.hm-ilus{margin-top:18px;text-align:right}

/* 13.2 O que a Genuo faz: três frentes num traço só, que sangra as duas bordas e termina tracejado (conexão opcional) */
.hm-frentes{--g:64px;position:relative;margin-top:96px}
.hm-frentes ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--g)}
.hm-frentes li{position:relative;padding-top:48px}
.hm-no{position:absolute;left:0;top:-8px;width:18px;height:18px;background:var(--gelo);box-shadow:inset 0 0 0 2px var(--navy)}
.hm-trilho{position:absolute;top:0;height:2px;left:calc(50% - 50vw);width:calc(50vw - 50% + 200% / 3 + var(--g) * 2 / 3);background:var(--navy);transform-origin:left center}
.hm-trilho-t{position:absolute;top:0;height:2px;left:calc(200% / 3 + var(--g) * 2 / 3);right:calc(50% - 50vw);background:repeating-linear-gradient(90deg,var(--navy) 0 10px,transparent 10px 18px);transform-origin:left center}
.hm-fr-t{font-size:clamp(30px,2.9vw,42px);font-weight:850;letter-spacing:-.035em;line-height:1}
.hm-frentes .texto{margin-top:16px;font-size:18px;max-width:34ch}
.js .hm-frentes .hm-trilho{transition-duration:1100ms}
.js .hm-frentes .hm-trilho-t{transition-duration:700ms}

/* 13.3 As duas portas: navy, 7/5, a tela do comprador invade a dobra seguinte */
.hm-portas{position:relative;z-index:2;overflow:visible;padding-bottom:var(--e-5)}
.hm-portas .h2{max-width:26ch}
.hm-portas-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 80px;margin-top:80px;align-items:start}
.hm-portas .divisor .aba{background:var(--azul-t);color:var(--folha)}
.hm-portas .divisor i{background:rgba(242,245,248,.34)}
.hm-lista{margin-top:10px}
.hm-lista li{display:flex;gap:14px;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(242,245,248,.16);font-size:clamp(19px,1.5vw,22px);line-height:1.4;font-weight:600;color:var(--gelo);max-width:40ch}
.hm-lista li::before{content:"";width:9px;height:9px;background:var(--azul-claro);flex:0 0 auto;transform:translateY(-2px)}
.hm-porta .bt{margin-top:32px}
/* portas: as duas colunas dividem as mesmas linhas (subgrid) para os botões ficarem na mesma base */
.hm-portas-grid{grid-template-rows:auto auto auto auto}
.hm-porta{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
.hm-porta .bt-f::after{transition-duration:180ms}
@media (hover:hover){.bg-navy .hm-porta .bt:hover .bt-f{background:var(--azul-t)}}
.hm-tela-itens{margin-top:56px;margin-bottom:-176px;z-index:3;box-shadow:var(--sombra-escura);color:var(--navy)}
.hm-tela-itens .tela-corpo{padding:24px 30px 18px;background:var(--folha)}
.hm-itens{font-size:15px}
.hm-itens caption{padding-bottom:10px}
.hm-itens caption .mono{font-size:12px;color:var(--cz-t)}
.hm-itens th{vertical-align:bottom;line-height:1.3}
.hm-itens td{padding:15px 14px 15px 0}
.hm-itens td:first-child{font-weight:700;color:var(--navy)}
.hm-itens .hm-ult{background:var(--gelo);padding-left:14px;padding-right:14px;color:var(--cz-escuro)}
.hm-itens th.hm-ult{color:var(--navy)}

/* 13.4 Como funciona: quatro etiquetas em degrau; a decisão humana em navy cheio */
.hm-passos{position:relative;z-index:1;padding-top:calc(var(--e-6) + 176px)}
.hm-fluxo{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 56px;margin-top:88px;align-items:start}
.hm-etapa{position:relative;margin-top:calc(var(--n,0) * 36px)}
.hm-etapa .et-w{--dx:8px}
.hm-etapa .et,.hm-etapa .et-bd{--cf:26px}
.hm-etapa .et{padding:20px 40px 26px 20px;min-height:184px}
.hm-et-t{text-wrap:balance;margin-top:14px;font-size:clamp(19px,1.55vw,23px);font-weight:750;line-height:1.3;letter-spacing:-.012em;color:var(--navy)}
.hm-etapa.hum .et{background:var(--navy);color:var(--folha)}
.hm-etapa.hum .lb{color:var(--azul-claro)}
.hm-etapa.hum .lb i{background:var(--laranja)}
.hm-etapa.hum .hm-et-t{color:var(--folha)}
.hm-etapa.hum .et-bd{background:var(--azul)}
.hm-seta{position:absolute;top:92px;left:calc(100% + 14px);width:28px;height:2px;background:var(--navy);transform-origin:left center}
.hm-seta::after{content:"";position:absolute;right:-2px;top:-6px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid var(--navy)}

/* 13.5 O time: frase larga + 5/7 com a conversa */
.hm-time-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;margin-top:56px;align-items:start}
.hm-time-grid .lead{color:var(--navy);max-width:38ch}
.hm-time .nota{margin-top:12px}

/* 13.6 Chamada: abertura centralizada + a primeira pergunta do formulário numa etiqueta */
.hm-cta-sub{text-align:center;margin:22px auto 0;max-width:46ch}
.hm-cta-acts{display:flex;justify-content:center;margin-top:36px}
.hm-perfil{width:min(100%,1120px);margin:88px auto 0;--dx:10px}
.hm-perfil .et,.hm-perfil .et-bd{--cf:40px}
.hm-perfil .et{padding:26px 64px 30px 28px}
.hm-perfil ul{display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr));gap:12px 14px;margin-top:18px}
.hm-perfil .perfil-b{font-size:17px;width:100%;white-space:nowrap;padding-right:28px}

@media (max-width:1100px){
  .hm-hero .hero-vis{padding-left:0}
  .hm-perfil ul{grid-template-columns:minmax(0,1fr)}
  .hm-perfil .perfil-b{white-space:normal}
  .hm-portas-grid,.hm-time-grid{grid-template-columns:minmax(0,1fr);gap:56px}
  .hm-portas-grid{grid-template-rows:none}
  .hm-porta{display:block;grid-row:auto}
  .hm-tela-itens{margin-bottom:0}
  .hm-portas{padding-bottom:var(--e-6)}
  .hm-passos{padding-top:var(--e-6)}
  .hm-fluxo{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 56px}
  .hm-etapa{margin-top:0}
  .hm-etapa:nth-child(2) .hm-seta{display:none}
}
@media (max-width:860px){
  .hm-frentes{padding-left:40px;margin-top:64px}
  .hm-frentes ul{grid-template-columns:minmax(0,1fr);gap:40px}
  .hm-frentes li{padding-top:0}
  .hm-no{left:-42px;top:6px}
  .hm-trilho{left:6px;top:0;bottom:calc(var(--e-6) * -1);width:2px;height:auto;transform-origin:center top}
  .hm-trilho-t{display:none}
  .js .hm-frentes .hm-trilho{transform:scaleY(0)}
  .js .hm-frentes.in .hm-trilho{transform:scaleY(1)}
  .hm-fluxo{grid-template-columns:minmax(0,1fr);gap:40px;max-width:520px;margin-left:auto;margin-right:auto}
  .hm-etapa .et{min-height:0}
  .hm-etapa:nth-child(2) .hm-seta{display:block}
  .hm-seta{top:calc(100% + 12px);left:36px;width:2px;height:18px;transform-origin:center top}
  .hm-seta::after{right:auto;left:-6px;top:auto;bottom:-3px;border:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid var(--navy)}
  .js .hm-fluxo .hm-seta{transform:scaleY(0)}
  .js .hm-fluxo.in .hm-seta{transform:scaleY(1)}
}
@media (max-width:600px){
  .hm-hero .hero-vis{padding:0;margin:6px calc(var(--gut) * -1) 0 0}
  .hm-hero .hero-vis .tela{display:block;border-radius:var(--r-box) 0 0 var(--r-box)}
  .hm-hero .tela-bar{height:36px;padding:0 14px;gap:10px}
  .hm-hero .tela-bar img{width:18px;height:18px}
  .hm-hero .tela-bar .mono{font-size:11px;padding:3px 10px}
  .hm-hero .hero-vis .tela-corpo{padding:14px 18px 12px 16px}
  .hm-comp{font-size:13px}
  .hm-comp caption{padding-bottom:8px}
  .hm-comp caption b{font-size:15.5px}
  .hm-comp .hm-ref{font-size:12.5px;margin-top:4px;gap:8px}
  .hm-comp .hm-ref .mono{font-size:13px}
  .hm-comp th{padding:6px 8px 6px 0;font-size:10px;letter-spacing:.06em}
  .hm-comp td{padding:9px 8px 9px 0}
  .hm-comp .vr{width:64px;height:18px}
  .hm-comp .vr .bar{height:10px;margin-top:-5px}
  .hm-ilus{margin-top:6px;font-size:11px}
  .hm-lista li{font-size:18px;padding:15px 0}
  .hm-tela-itens{margin-top:40px;margin-right:calc(var(--gut) * -1);border-radius:var(--r-box) 0 0 var(--r-box)}
  .hm-tela-itens .tela-corpo{padding:16px 14px 10px}
  .hm-itens{font-size:12.5px}
  .hm-itens th{font-size:10.5px;letter-spacing:0;text-transform:none;padding:8px 6px 8px 0}
  .hm-itens td{padding:11px 6px 11px 0}
  .hm-itens .hm-ult{padding-left:6px;padding-right:6px}
  .hm-fluxo{margin-top:56px}
  .hm-etapa .et{padding:16px 34px 20px 16px}
  .hm-et-t{font-size:19px;margin-top:10px}
  .hm-time-grid{margin-top:32px;gap:36px}
  .hm-perfil{margin-top:56px}
  .hm-perfil .et,.hm-perfil .et-bd{--cf:28px}
  .hm-perfil .et{padding:20px 20px 22px}
  .hm-perfil ul{grid-template-columns:minmax(0,1fr)}
  .hm-perfil .perfil-b{width:100%;font-size:16px}
  .hm-ok-fio{margin-right:-20px}
}
@media (prefers-reduced-motion:reduce){
  .js .hm-frentes .hm-trilho,.js .hm-fluxo .hm-seta{transform:none!important;transition:none!important}
}

/* GenuoID: rótulo azul em caixa alta + código em mono, junto do nome do produto (só em card de UM produto) */
.gid{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 9px;margin:7px 0 0;padding:0;line-height:1.25;font-family:var(--f-body,inherit);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-t)}
.gid .gid-l{display:inline-block}
.gid .gid-c,.mesa caption .gid .gid-c{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--navy)}
.hm-comp .gid{margin-top:8px}

/* ---------- 14. INTELIGÊNCIA (v3b, DECISOES S15) ----------
   A estante com duas prateleiras: o que funciona hoje é plaqueta cheia sobre fio sólido;
   o que estamos construindo é o risco tracejado da mesma plaqueta, sobre fio tracejado
   (o "retorno tracejado" do DNA) que sangra as duas bordas. Sem chip laranja, sem ícone,
   sem brilho. Prefixo ia-. Claro por padrão; .bg-navy inverte. Só tokens do sistema. */
.ia{--ia-fio:var(--navy);--ia-tr:var(--cz-t)}
.ia.bg-navy{--ia-fio:var(--gelo-m);--ia-tr:var(--gelo-m)}
.ia .h2{max-width:none}
.ia-lead{margin-top:28px;max-width:50ch}
.ia-lead b{font-weight:800;color:var(--navy)}
.ia.bg-navy .ia-lead b{color:var(--folha)}
/* "hoje" marcado dentro da frase: a plaqueta cheia em linha, com o chanfro no canto */
.ia-hj{font-weight:750;color:var(--folha);padding:.04em .62em .1em .32em;margin:0 .04em;
  background:linear-gradient(225deg,transparent .42em,var(--navy) calc(.42em + .5px));
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.ia.bg-navy .ia-hj{color:var(--navy);background:linear-gradient(225deg,transparent .42em,var(--folha) calc(.42em + .5px))}
.ia-estante{position:relative;margin-top:72px}
.ia-prat{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0 40px;align-items:end;padding-bottom:26px}
.ia-prat.ia-so{grid-template-columns:minmax(0,1fr)}
/* quando a frase de abertura é a prateleira de hoje, ela fica colada ao H2 */
.ia-estante.ia-frase{margin-top:36px}
.ia-so .ia-lead{margin-top:0}
.ia-prat + .ia-prat{margin-top:64px}
.ia-cab{font-size:clamp(30px,2.7vw,40px);font-weight:850;letter-spacing:-.035em;line-height:1;color:var(--navy);padding-bottom:10px;text-wrap:balance}
.ia-obra .ia-cab{color:var(--cz-t)}
.ia.bg-navy .ia-cab{color:var(--folha)}
.ia.bg-navy .ia-obra .ia-cab{color:var(--gelo-m)}
.ia-its{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:24px 32px;align-items:end}
.ia-t{display:block;font-size:clamp(19px,1.55vw,22px);font-weight:750;line-height:1.3;letter-spacing:-.012em;text-wrap:balance}
/* plaqueta cheia: navy no claro, folha sobre navy (a base deslocada segue o sistema) */
.ia-its .et-w{--dx:8px}
.ia-its .et,.ia-its .et-bd{--cf:24px}
.ia-its .et{min-height:112px;display:flex;align-items:flex-end;padding:20px 44px 22px 20px;background:var(--navy);color:var(--folha)}
.ia-its .et-bd{background:var(--azul)}
.ia.bg-navy .ia-its .et{background:var(--folha);color:var(--navy)}
/* o risco da plaqueta: mesmo corte, mesma medida, só o contorno tracejado, em tom mais baixo */
.ia-risco{position:relative;--cf:24px;min-height:112px;display:flex;align-items:flex-end;padding:20px 44px 22px 20px;margin:0 8px 8px 0;color:var(--cz-escuro);
  background:
    repeating-linear-gradient(90deg,var(--ia-tr) 0 8px,transparent 8px 14px) 0 0 / calc(100% - var(--cf)) 2px no-repeat,
    repeating-linear-gradient(90deg,var(--ia-tr) 0 8px,transparent 8px 14px) 0 100% / 100% 2px no-repeat,
    repeating-linear-gradient(180deg,var(--ia-tr) 0 8px,transparent 8px 14px) 0 0 / 2px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--ia-tr) 0 8px,transparent 8px 14px) 100% 100% / 2px calc(100% - var(--cf)) no-repeat}
.ia-risco::before{content:"";position:absolute;left:calc(100% - var(--cf));top:0;width:calc(var(--cf) * 1.4142);height:2px;background:repeating-linear-gradient(90deg,var(--ia-tr) 0 8px,transparent 8px 14px);transform-origin:0 1px;transform:rotate(45deg)}
.ia.bg-navy .ia-risco{color:var(--gelo-t)}
.ia-risco .ia-t{font-weight:700}
/* a prateleira: fio que sangra as duas bordas; sólido no que existe, tracejado no que está em construção */
.ia-fio{position:absolute;bottom:0;height:2px;background:var(--ia-fio);transform-origin:left center;
  --sangra:calc(-1 * (var(--gut) + max(0px,(100vw - var(--largura) - var(--gut) * 2) / 2)));left:var(--sangra);right:var(--sangra)}
.ia-fio.tr{background:repeating-linear-gradient(90deg,var(--ia-fio) 0 10px,transparent 10px 18px)}
.js .ia-estante .ia-fio{transition-duration:900ms}
/* a regra, com destaque sóbrio: corpo maior e peso, sem cor nova */
.ia-fecho{display:flex;gap:16px;align-items:baseline;margin-top:64px;font-size:clamp(23px,2.1vw,30px);font-weight:750;letter-spacing:-.02em;line-height:1.25;color:var(--navy);max-width:42ch;text-wrap:balance}
.ia-fecho::before{content:"";width:12px;height:12px;flex:0 0 auto;background:var(--azul-t);transform:translateY(-.12em)}
.ia.bg-navy .ia-fecho{color:var(--folha)}
.ia.bg-navy .ia-fecho::before{background:var(--azul-claro)}
@media (max-width:1100px){
  .ia-prat{grid-template-columns:minmax(0,1fr);gap:18px 0}
}
@media (max-width:860px){
  .ia-its{grid-template-columns:minmax(0,1fr);gap:22px}
  .ia-its .et,.ia-risco{min-height:0}
}
@media (max-width:600px){
  .ia-lead{margin-top:20px}
  .ia-estante{margin-top:48px}
  .ia-estante.ia-frase{margin-top:24px}
  .ia-prat + .ia-prat{margin-top:44px}
  .ia-prat{padding-bottom:22px}
  .ia-cab{font-size:28px}
  .ia-its .et,.ia-risco{padding:16px 36px 18px 16px}
  .ia-t{font-size:18.5px}
  .ia-fecho{margin-top:44px;font-size:21px;gap:12px}
  .ia-fecho::before{width:10px;height:10px}
}

/* ---------- 15. A REDE E O MAPA DA INTELIGÊNCIA (rodada rede e IA · DECISOES S20, S24, S24b) ----------
   Só acréscimo. A gramática é a do DNA: plaqueta chanfrada com base deslocada, conector de 2px com
   seta cheia, pilha de plaquetas para dizer "grupo" sem contar quantos, e o traço tracejado para o
   que a base torna possível com a IA. Prefixos rd- (rede) e ia- (mapa). Todo texto mora no HTML:
   para ES e EN basta trocar o texto, as classes e a estrutura ficam iguais. */

/* 15.1 Rede · comum às três páginas */
.rd{--rd-fio:var(--gelo-m)}
.rd-home .h2.h2-c{max-width:34ch}
.rd-sub{text-align:center;margin:24px auto 0;max-width:56ch}
.rd-g-t{font-size:clamp(20px,1.8vw,25px);font-weight:800;letter-spacing:-.022em;line-height:1.18;color:var(--navy);text-wrap:balance}
/* pilha: duas plaquetas atrás da da frente, subindo à direita; é um grupo, sem número */
.rd-pilha{position:relative;isolation:isolate;--cf:24px}
.rd-pilha::before,.rd-pilha::after{content:"";position:absolute;inset:0;background:var(--gelo-m);clip-path:polygon(0 0,calc(100% - var(--cf)) 0,100% var(--cf),100% 100%,0 100%)}
.rd-pilha::before{z-index:-1;transform:translate(12px,-12px);opacity:.5}
.rd-pilha::after{z-index:-2;transform:translate(24px,-24px);opacity:.26}
.rd-pilha .et-w{--dx:8px}
.rd-pilha .et,.rd-pilha .et-bd{--cf:24px}
.rd-pilha .et{min-height:124px;display:flex;align-items:flex-end;padding:22px 48px 24px 22px}

/* 15.2 Rede · home: a plataforma como trilho duplo que sangra as duas bordas;
   compradores em cima, vendedores embaixo, a mesma plaqueta dos dois lados (mesmas regras) */
.rd-painel{--no-w:128px;--no-h:58px;--lig:44px;--gap:26px;position:relative;margin-top:84px}
.rd-lado{display:flex;justify-content:center;margin:0 0 22px}
.rd-lado:last-child{margin:22px 0 0}
.rd-nos{position:relative;left:50%;display:flex;gap:var(--gap);width:max-content;transform:translateX(-50%)}
.rd-nos li{display:flex;flex-direction:column;align-items:center}
.rd-no{display:block;width:var(--no-w);height:var(--no-h);--dx:6px}
.rd-no .et,.rd-no .et-bd{--cf:16px}
.rd-no .et{display:block;height:100%;padding:0}
.rd-no .et i{position:absolute;left:14px;top:14px;width:9px;height:9px;background:var(--azul-t)}
.rd-lig{display:block;width:2px;height:var(--lig);background:var(--rd-fio)}
.rd-nos-c .rd-lig{margin-top:6px;height:calc(var(--lig) - 6px);transform-origin:center top}
.rd-nos-v .rd-lig{transform-origin:center bottom}
.rd-plat{position:relative;display:flex;justify-content:center;padding-bottom:10px}
.rd-trilho{position:absolute;top:0;height:2px;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--rd-fio);transform-origin:center center}
.rd-trilho-b{top:auto;bottom:0}
.js .rd-painel .rd-trilho{transition-duration:1100ms}
.rd-plat-et{position:relative;z-index:1;width:min(100%,980px);--dx:10px}
.rd-plat-et .et,.rd-plat-et .et-bd{--cf:36px}
.rd-plat-et .et{display:flex;align-items:center;gap:34px;padding:30px 64px 30px 30px}
.rd-simb{width:46px;height:46px;flex:0 0 auto}
.rd-regras{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.rd-regras li{padding:4px 18px 6px 22px;border-left:2px solid var(--navy);font-size:clamp(20px,1.8vw,25px);font-weight:850;letter-spacing:-.025em;line-height:1.15;color:var(--navy);text-wrap:balance}

/* 15.3 Rede · comprador: a sua empresa ligada a três grupos de fornecedores (árvore que se desenha) */
.rd-arv{--g:56px;--desce:44px;position:relative;display:flex;flex-direction:column;align-items:center;margin-top:84px}
.rd-raiz{width:min(100%,400px);--dx:10px}
.rd-raiz .et,.rd-raiz .et-bd{--cf:30px}
.rd-raiz .et{padding:24px 56px 26px 24px}
.rd-raiz-t{font-size:clamp(28px,2.6vw,38px);font-weight:850;letter-spacing:-.035em;line-height:1.05;color:var(--navy)}
.rd-haste{display:block;width:2px;height:48px;margin-top:10px;background:var(--rd-fio);transform-origin:center top}
.rd-ramos{position:relative;width:100%;max-width:1120px}
.rd-barra{position:absolute;top:0;height:2px;left:calc((100% - var(--g) * 2) / 6);right:calc((100% - var(--g) * 2) / 6);background:var(--rd-fio);transform-origin:center center}
.rd-ramos ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--g)}
.rd-ramos li{position:relative;padding:calc(var(--desce) + 24px) 24px 0 0}
.rd-desce{position:absolute;z-index:2;top:0;left:calc(50% - 1px);width:2px;height:var(--desce);background:var(--rd-fio);transform-origin:center top}
.rd-desce::after{content:"";position:absolute;left:-6px;bottom:-2px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid var(--rd-fio)}

/* 15.4 Rede · vendedor: o caminho em três etapas, em degrau; a última é a pilha (uma homologação por comprador) */
.rd-degrau{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 72px;max-width:1160px;margin:96px auto 0;align-items:start}
.rd-passo{position:relative;margin-top:calc(var(--n,0) * 44px)}
.rd-passo:last-child{padding-right:24px}
.rd-degrau .et-w{--dx:8px}
.rd-degrau .et,.rd-degrau .et-bd{--cf:24px}
.rd-degrau .et{min-height:136px;display:flex;align-items:flex-end;padding:22px 48px 24px 22px}
.rd-seta{position:absolute;top:66px;left:calc(100% + 16px);width:40px;height:2px;background:var(--rd-fio);transform-origin:left center}
.rd-seta::after{content:"";position:absolute;right:-2px;top:-6px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid var(--rd-fio)}

/* 15.5 Mapa da inteligência: quatro plaquetas cheias entram por um espinhaço num só lugar;
   do lugar saem, em traço tracejado, as análises que a base torna possíveis com a IA */
.ia-mapa{--h:72px;--gv:14px;--ramo:34px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,360px) 72px minmax(0,1fr);align-items:center;margin-top:96px}
.ia-col{position:relative}
.ia-col ul{display:flex;flex-direction:column;gap:var(--gv)}
.ia-col li{display:flex;align-items:center}
.ia-mapa .et-w{--dx:7px}
.ia-ent li .et-w{flex:1 1 auto;min-width:0}
.ia-ent .et,.ia-ent .et-bd{--cf:20px}
.ia-ent .et{height:var(--h);display:flex;align-items:center;padding:0 40px 0 20px;background:var(--aco);color:var(--navy)}
.ia-ent .et-bd{background:var(--cz-claro)}
.ia.bg-navy .ia-ent .et{background:var(--gelo-t)}
.ia.bg-navy .ia-ent .et-bd{background:var(--azul)}
.ia-mapa .ia-t{font-size:clamp(18px,1.5vw,21px)}
.ia-ramo{flex:0 0 var(--ramo);height:2px;background:var(--ia-fio);transform-origin:left center}
.ia-esp{position:absolute;top:calc(var(--h) / 2);bottom:calc(var(--h) / 2);width:2px;background:var(--ia-fio);transform-origin:center center}
.ia-ent .ia-esp{right:0}
.ia-sai .ia-esp{left:0}
.ia-haste{position:relative;height:2px;background:var(--ia-fio);transform-origin:left center}
.ia-haste:not(.tr)::after{content:"";position:absolute;right:-2px;top:-6px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid var(--ia-fio)}
.ia-haste.tr{margin-left:12px}
.ia-haste.tr,.ia-ramo.tr{background:repeating-linear-gradient(90deg,var(--ia-fio) 0 8px,transparent 8px 14px)}
.ia-esp.tr{background:repeating-linear-gradient(180deg,var(--ia-fio) 0 8px,transparent 8px 14px)}
.ia-sai .ia-ramo{position:relative;margin-right:14px}
.ia-sai .ia-ramo::after{content:"";position:absolute;right:-12px;top:-6px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid var(--ia-fio)}
.ia-sai .ia-risco{flex:1 1 auto;min-width:0;min-height:0;height:var(--h);margin:0 8px 0 0;align-items:center;padding:0 40px 0 20px}
.ia-sai-r{position:absolute;bottom:calc(100% + 18px);left:calc(var(--ramo) + 14px)}
.ia.bg-navy .ia-sai-r{color:var(--azul-claro)}
.ia-centro{--dx:12px}
.ia-centro .et,.ia-centro .et-bd{--cf:34px}
.ia-centro .et{min-height:196px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 56px 28px 26px;background:var(--navy);color:var(--folha)}
.ia-centro .et-bd{background:var(--azul)}
.ia-centro .lb{color:var(--azul-claro)}
.ia-centro .lb i{background:var(--azul-claro)}
.ia.bg-navy .ia-centro .et{background:var(--folha);color:var(--navy)}
.ia.bg-navy .ia-centro .lb{color:var(--azul-t)}
.ia.bg-navy .ia-centro .lb i{background:var(--azul-t)}
.ia-c-t{margin-top:12px;font-size:clamp(28px,2.6vw,38px);font-weight:850;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
.ia-fecho b{font-weight:800}
/* versão compacta (/sobre): só as entradas e o lugar */
.ia-mini{grid-template-columns:minmax(0,1fr) 64px minmax(0,250px);margin-top:0}
.ia-mini .ia-centro .et{min-height:168px}

@media (max-width:1100px){
  .rd-painel{--no-w:104px;--gap:20px}
  .rd-plat-et .et{gap:24px;padding-right:48px}
  .ia-mapa{grid-template-columns:minmax(0,1fr) 56px minmax(0,250px) 56px minmax(0,1fr);--ramo:26px}
  .ia-mini{grid-template-columns:minmax(0,1fr) 56px minmax(0,240px)}
}
@media (max-width:860px){
  /* comprador: a árvore vira um espinhaço à esquerda, com um ramo por grupo */
  .rd-arv{align-items:stretch;margin-top:56px}
  .rd-raiz{width:100%}
  .rd-haste{margin-left:22px;height:32px}
  .rd-barra{left:22px;right:auto;top:0;bottom:42px;width:2px;height:auto;transform-origin:center top}
  .rd-ramos ul{grid-template-columns:minmax(0,1fr);gap:22px 0}
  .rd-ramos li{padding:16px 16px 0 62px}
  .rd-desce{top:57px;left:24px;width:24px;height:2px;transform-origin:left center}
  .rd-desce::after{left:auto;right:-2px;bottom:auto;top:-6px;border-left:12px solid var(--rd-fio);border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:0}
  .rd-pilha::before{transform:translate(8px,-8px)}
  .rd-pilha::after{transform:translate(16px,-16px)}
  .rd-arv .rd-pilha .et{min-height:0;height:84px;align-items:center;padding:0 40px 0 18px}
  .js .rd-arv .rd-barra{transform:scaleY(0)}
  .js .rd-arv.in .rd-barra{transform:none}
  .js .rd-arv .rd-desce{transform:scaleX(0)}
  .js .rd-arv.in .rd-desce{transform:none}
  /* vendedor: as etapas empilhadas, ainda em degrau, com a seta para baixo */
  .rd-degrau{grid-template-columns:minmax(0,1fr);gap:46px;max-width:460px;margin-top:64px}
  .rd-passo{margin-top:0;margin-left:calc(var(--n,0) * 18px)}
  .rd-passo:last-child{padding-right:16px;margin-top:10px}
  .rd-degrau .et{min-height:0;padding:20px 44px 22px 20px}
  .rd-seta{left:32px;top:calc(100% + 10px);width:2px;height:24px;transform-origin:center top}
  .rd-seta::after{right:auto;left:-6px;top:auto;bottom:-10px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid var(--rd-fio);border-bottom:0}
  .js .rd-degrau .rd-seta{transform:scaleY(0)}
  .js .rd-degrau.in .rd-seta{transform:none}
  /* mapa: um espinhaço só, à esquerda, de cima para baixo */
  .ia-mapa,.ia-mini{--h:54px;--gv:10px;--ramo:26px;grid-template-columns:minmax(0,1fr);align-items:stretch;margin-top:56px}
  .ia-mini{margin-top:40px}
  .ia-col li{padding-left:20px}
  .ia-ent li{flex-direction:row-reverse}
  .ia-ent .ia-esp{right:auto;left:20px;bottom:0}
  .ia-sai .ia-esp{left:20px;top:0}
  .ia-haste{width:2px;height:34px;margin-left:20px;transform-origin:center top}
  .ia-haste:not(.tr)::after{right:auto;left:-6px;top:auto;bottom:-2px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid var(--ia-fio);border-bottom:0}
  .ia-haste.tr{margin:12px 0 0 20px;background:repeating-linear-gradient(180deg,var(--ia-fio) 0 8px,transparent 8px 14px)}
  .js .ia-mapa .ia-haste{transform:scaleY(0)}
  .js .ia-mapa.in .ia-haste{transform:none}
  .ia-ent .et{padding:0 36px 0 16px}
  .ia-sai .ia-risco{padding:0 36px 0 16px}
  .ia-sai-r{position:static;display:flex;margin:10px 0 14px;padding-left:calc(20px + var(--ramo) + 14px)}
  .ia-centro{--dx:8px}
  .ia-centro .et,.ia-centro .et-bd{--cf:26px}
  .ia-centro .et,.ia-mini .ia-centro .et{min-height:0;padding:18px 44px 20px 18px}
  .ia-c-t{font-size:26px;margin-top:8px}
}
@media (max-width:600px){
  .rd-painel{--no-w:62px;--no-h:40px;--lig:30px;--gap:12px;margin-top:52px}
  .rd-no{--dx:5px}
  .rd-no .et,.rd-no .et-bd{--cf:10px}
  .rd-no .et i{left:9px;top:9px;width:7px;height:7px}
  .rd-lado{margin-bottom:16px}
  .rd-lado:last-child{margin-top:16px}
  .rd-plat-et{--dx:8px}
  .rd-plat-et .et,.rd-plat-et .et-bd{--cf:26px}
  .rd-plat-et .et{flex-direction:column;align-items:flex-start;gap:12px;padding:20px 40px 12px 20px}
  .rd-simb{width:34px;height:34px}
  .rd-regras{grid-template-columns:minmax(0,1fr);width:100%}
  .rd-regras li{border-left:0;border-top:2px solid var(--navy);padding:10px 0 11px;font-size:20px}
  .rd-raiz .et,.rd-raiz .et-bd{--cf:24px}
  .rd-raiz .et{padding:18px 44px 20px 18px}
  .rd-raiz-t{font-size:26px}
  .rd-g-t{font-size:19px}
  .ia-mapa .ia-t{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .js .rd-painel .rd-trilho,.js .rd-arv .rd-barra,.js .rd-arv .rd-desce,.js .rd-degrau .rd-seta,.js .ia-mapa .ia-haste{transform:none!important;transition:none!important}
}

/* ---------- 16. REDE v2 · HOME (rodada S25: mercado, alcance e potencial) ----------
   Só acréscimo. A plataforma no centro; três camadas com o contorno chanfrado da própria plaqueta,
   crescendo para fora; plaquetas em densidade crescente (compradores em cima, maiores; vendedores
   embaixo, mais numerosos); raios que saem da plataforma, atravessam as camadas e passam das bordas.
   O desenho mora em dois SVG (largo e celular) na escala 1:1 do px da tela: o viewBox é mais largo
   que a tela e o slice corta nas bordas, então os rótulos em HTML casam com o desenho por px a partir
   do centro. A cena (.rd2-palco) é só a faixa do meio, para a coreografia começar quando o centro
   aparece. Laranja só no fio das ligações novas. Todo texto mora no HTML (ES e EN trocam só o texto). */
.rd2-painel{position:relative;height:740px;margin:64px calc(50% - 50vw) 0}
.rd2-palco{position:absolute;left:0;right:0;top:calc(50% - 60px);height:120px}
.rd2-sprite{position:absolute;width:0;height:0;overflow:hidden}
.rd2-mapa{position:absolute;left:0;top:calc(50% - 370px);width:100%;height:740px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%)}
.rd2-m{display:none}
.rd2-anel{fill:none;stroke:var(--gelo-m);stroke-opacity:.34;stroke-width:1.5}
.rd2-raio{stroke:var(--gelo-m);stroke-width:2;transform-box:fill-box}
.rd2-up{transform-origin:center bottom}
.rd2-dn{transform-origin:center top}
.rd2-lf{transform-origin:right center}
.rd2-rt{transform-origin:left center}
.rd2-novo{stroke:var(--laranja);stroke-width:2.5}
.rd2-n{transform-box:fill-box;transform-origin:center}
.rd2-centro{position:absolute;z-index:2;left:50%;top:50%;width:420px;transform:translate(-50%,-50%)}
.rd2-plat{--dx:10px}
.rd2-plat .et,.rd2-plat .et-bd{--cf:34px}
.rd2-plat .et{display:flex;align-items:center;gap:28px;padding:26px 60px 26px 28px}
.rd2-selos{flex:1 1 auto;list-style:none}
.rd2-selos li{padding:8px 0 9px;border-top:2px solid var(--navy);font-size:22px;font-weight:850;letter-spacing:-.025em;line-height:1.15;color:var(--navy)}
/* rótulos: fundo navy para o fio de trás não cruzar a letra; alinhados à coluna da página */
.rd2-r{position:absolute;z-index:1;top:calc(50% + var(--y,0px) - 12px);height:24px;margin:0 -10px;padding:0 10px;background:var(--navy);white-space:nowrap}
.rd2-r-c,.rd2-r-v{left:max(var(--gut),calc(50% - 648px))}
.rd2-r-c{--y:-223px}
.rd2-r-v{--y:223px}
.rd2-r-n{--y:308px;right:calc(50% - 400px)}
.rd2-r-n::before{width:18px;height:3px;background:var(--laranja)}
/* alcance: o rótulo na coluna e o fio correndo até a borda da tela */
.rd2-r-a{--y:-309px;right:0;display:flex;align-items:center;gap:14px;margin:0;padding:0 0 0 10px}
.rd2-borda{display:block;flex:0 0 auto;width:max(var(--gut),calc(50vw - 648px));height:2px;background:var(--gelo-m);transform-origin:left center}
.js .cena .rd2-anel{opacity:0;transition:opacity var(--d-reveal) var(--ease);transition-delay:var(--t,0ms)}
.js .cena.in .rd2-anel{opacity:1}
.js .cena .rd2-raio{transform:scaleY(0);transition:transform var(--dur,900ms) var(--ease);transition-delay:var(--t,0ms)}
.js .cena .rd2-lf,.js .cena .rd2-rt{transform:scaleX(0)}
.js .cena.in .rd2-raio{transform:none}
.js .cena .rd2-n{opacity:0;transform:scale(.72);transition:opacity var(--d-lista) var(--ease),transform var(--d-lista) var(--ease);transition-delay:var(--t,0ms)}
.js .cena.in .rd2-n{opacity:1;transform:none}
/* ligações novas: depois dos raios, acendem uma vez em sequência e ficam acesas (só opacidade, sem loop:
   o DNA proíbe loop sem fim). O --t do HTML (2400/4400/6400ms) é comprimido para 2400/3400/4400ms. */
.js .cena .rd2-novo{opacity:0}
.js .cena.in .rd2-novo{animation:rd2-novo 700ms var(--ease) calc(var(--t,2400ms) * .5 + 1200ms) 1 both}
@keyframes rd2-novo{from{opacity:0}to{opacity:1}}
@media (max-width:860px){
  .rd2-painel{height:760px;margin-top:48px}
  .rd2-d{display:none}
  .rd2-m{display:block}
  .rd2-mapa{top:calc(50% - 380px);height:760px}
  .rd2-centro{width:300px}
  .rd2-plat{--dx:8px}
  .rd2-plat .et,.rd2-plat .et-bd{--cf:26px}
  .rd2-plat .et{gap:16px;padding:18px 40px 18px 18px}
  .rd2-plat .rd-simb{width:34px;height:34px}
  .rd2-selos li{padding:7px 0 8px;font-size:17px}
  .rd2-r,.rd2-r .rotulo{font-size:12px}
  .rd2-r-c{--y:-188px;left:auto;right:var(--gut)}
  .rd2-r-a{--y:-277px}
  .rd2-r-v{--y:188px;left:var(--gut)}
  .rd2-r-n{--y:277px;left:var(--gut);right:auto}
}
@media (prefers-reduced-motion:reduce){
  .js .cena .rd2-anel,.js .cena .rd2-raio,.js .cena .rd2-n,.js .cena .rd2-novo{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}