/* ==========================================================================
   Partner ERP — app.partnererp.com.br
   Amazônia Sistemas
   --------------------------------------------------------------------------
   Paleta extraída das telas reais do sistema (WinForms):
     navy   RGB 42,63,84    #2A3F54   — cabeçalhos e painéis
     navy2  RGB 36,53,72    #243548   — barras escuras
     btn    RGB 48,73,99    #304963   — botões
     hover  RGB 38,182,198  #26B6C6   — destaque (MouseOver)
     paper  RGB 249,249,249 #F9F9F9   — fundo dos formulários
     grid   RGB 239,243,251 #EFF3FB   — linha alternada do DataGridView
     alerta RGB 255,72,90   #FF485A   — valores em atraso
   Motivo gráfico: cubos isométricos da marca = arquitetura modular do ERP.
   --------------------------------------------------------------------------
   MOBILE FIRST — os blocos 1 a 10 descrevem o celular (uma coluna, a partir
   de 320px). O bloco 11 só ACRESCENTA, sempre com @media (min-width:...):

     480px   celular grande
     640px   celular deitado / tablet pequeno
     900px   tablet · menu horizontal no lugar do burger
     1024px  desktop · hero, segmentos e empresa em duas colunas
     1280px  desktop largo
     1600px  telas muito grandes (área de conteúdo cresce)

   Fora do bloco 12 (a11y/impressão) nenhuma regra de layout usa max-width:
   para mudar um componente, ajuste a base (celular) e depois o degrau certo.
   ========================================================================== */

/* ---------------------------------- 1. Tokens --------------------------- */
:root{
  /* marca */
  --navy-900:#16212C;
  --navy-850:#1B2836;
  --navy-800:#243548;
  --navy-700:#2A3F54;
  --navy-600:#304963;
  --navy-500:#46648C;
  --navy-400:#6B87A8;

  --teal:#26B6C6;
  --teal-bright:#3ED9E8;
  --teal-deep:#17808C;

  --amber:#F7B233;
  --blue:#2D9CDB;
  --red:#EE5A5F;
  --green:#4CAF7D;

  --paper:#F9F9F9;
  --paper-2:#EFF3FB;
  --white:#FFFFFF;
  --ink:#16212C;
  --ink-soft:#4A5C6E;
  --line:#DBE3EC;

  --wa:#25D366;
  --wa-dark:#1CAF52;
  --alert:#FF485A;

  /* tipografia */
  --f-display:'Archivo','Archivo Black',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* métrica */
  --wrap:1220px;
  --gut:clamp(16px,4.6vw,48px);   /* respiro lateral: 16px no 320, 48px no desktop */
  --nav-h:64px;                   /* altura do header fixo — cresce no bloco 11 */
  --tap:44px;                     /* alvo mínimo de toque */
  --r-sm:6px;
  --r:12px;
  --r-lg:20px;

  --sh-1:0 1px 2px rgba(22,33,44,.06),0 4px 12px rgba(22,33,44,.05);
  --sh-2:0 2px 4px rgba(22,33,44,.07),0 12px 32px rgba(22,33,44,.09);
  --sh-3:0 24px 64px rgba(16,28,40,.28);

  --ease:cubic-bezier(.2,.7,.3,1);

  /* textura */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------- 2. Base ----------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15px,.5vw + 13.6px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:800;letter-spacing:-.025em;line-height:1.05}
h1,h2,h3,p,li,dd,address{overflow-wrap:break-word}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--teal);color:var(--navy-900)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* guarda os <symbol> reaproveitados por <use> — não desenha nada sozinho */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* âncora do menu não pode parar embaixo do header fixo */
section[id]{scroll-margin-top:calc(var(--nav-h) + 8px)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--teal);color:var(--navy-900);padding:12px 20px;font-weight:600;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}

/* rótulo de seção  ─ // 01 — TÍTULO */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:clamp(.65rem,2vw,.72rem);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-bright);margin:0 0 16px;
}
.eyebrow i{width:8px;height:8px;background:var(--teal);flex:none;transform:rotate(45deg)}
.eyebrow--dark{color:var(--teal-deep)}

.mark-under{
  position:relative;white-space:nowrap;
}
.mark-under::after{
  content:'';position:absolute;left:-2px;right:-2px;bottom:.06em;height:.32em;
  background:linear-gradient(90deg,var(--teal) 0%,rgba(38,182,198,.35) 100%);
  z-index:-1;border-radius:2px;
}
.hl{color:var(--teal-bright)}

/* ---------------------------------- 3. Botões --------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap);
  padding:13px 20px;border-radius:var(--r-sm);
  font-family:var(--f-body);font-weight:600;font-size:.92rem;letter-spacing:-.01em;
  text-align:center;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s var(--ease),background .18s,border-color .18s,box-shadow .22s,color .18s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{min-height:38px;padding:9px 14px;font-size:.85rem}
.btn--lg{padding:15px 24px;font-size:.98rem}
.btn--full{width:100%}

.btn--wa{background:var(--wa);color:#08351A;box-shadow:0 6px 20px rgba(37,211,102,.28)}
.btn--wa:hover{background:#2EE377;box-shadow:0 10px 28px rgba(37,211,102,.4)}
.btn--ghost{border-color:rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.04)}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal-bright);background:rgba(38,182,198,.1)}
.btn--outline{border-color:rgba(255,255,255,.3);color:#fff;font-family:var(--f-mono);letter-spacing:.02em}
.btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--dark{background:var(--navy-700);color:#fff}
.btn--dark:hover{background:var(--navy-600);box-shadow:var(--sh-2)}

.ico-wa{width:19px;height:19px;fill:currentColor;flex:none}
.ico-arr{width:16px;height:16px;flex:none;transition:transform .2s var(--ease)}
.btn:hover .ico-arr{transform:translateX(4px)}

/* ---------------------------------- 4. Navegação ------------------------ */
/* Base = celular: burger visível e .nav__links como painel suspenso.       */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(26,40,54,0);
  transition:background .3s,box-shadow .3s,backdrop-filter .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(27,40,54,.9);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:rgba(255,255,255,.09);
  box-shadow:0 8px 30px rgba(10,18,26,.28);
}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding:10px var(--gut);
  min-height:var(--nav-h);
  display:flex;align-items:center;gap:12px;
}

.brand{display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.brand__mark{width:30px;height:30px;flex:none;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35));transition:transform .35s var(--ease)}
.brand:hover .brand__mark{transform:translateY(-2px) rotate(-6deg)}
.brand__txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 5px;line-height:1.05;min-width:0}
.brand__txt strong{font-family:var(--f-display);font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:-.03em}
.brand__txt em{font-family:var(--f-mono);font-style:normal;font-weight:500;font-size:.82rem;color:var(--teal)}
.brand__txt small{
  display:none;                   /* volta a aparecer a partir de 900px */
  flex-basis:100%;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;
  color:rgba(255,255,255,.42);
}

/* menu suspenso — .nav é fixed, então serve de bloco contêiner */
.nav__links{
  position:absolute;top:100%;left:0;right:0;
  display:flex;flex-direction:column;gap:0;
  background:rgba(22,33,44,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:10px var(--gut) 22px;
  border-bottom:1px solid rgba(255,255,255,.1);
  max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
  transform:translateY(-130%);visibility:hidden;
  transition:transform .38s var(--ease),visibility 0s linear .38s;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.nav__links.is-open{transform:translateY(0);visibility:visible;transition-delay:0s,0s}
.nav__links a{
  display:flex;align-items:center;min-height:var(--tap);
  padding:12px 4px;border-radius:var(--r-sm);
  font-size:1rem;font-weight:500;color:rgba(255,255,255,.76);
  border-bottom:1px solid rgba(255,255,255,.07);
  position:relative;transition:color .18s,background .18s;
}
.nav__links a::after{
  content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
  display:none;                   /* sublinhado só existe no menu horizontal */
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__cta{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.nav__cta .btn--wa{padding:10px;min-height:40px}
.nav__cta .btn--wa span{display:none}   /* só o ícone até sobrar espaço */

.burger{
  display:flex;width:var(--tap);height:var(--tap);flex:none;
  border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.18);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------------------------- 5. Hero ----------------------------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(26px,7vw,60px)) 0 clamp(44px,8vw,86px);
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(38,182,198,.20) 0%,transparent 55%),
    radial-gradient(90% 80% at 8% 100%,rgba(45,156,219,.16) 0%,transparent 60%),
    linear-gradient(168deg,var(--navy-800) 0%,var(--navy-700) 42%,var(--navy-850) 100%);
  color:#fff;
}
/* malha técnica */
.hero__grid{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 25%,transparent 78%);
}
.hero__glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:var(--noise);background-size:180px;mix-blend-mode:overlay;
}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(22,33,44,.35));
}

.hero__in{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(30px,7vw,44px);align-items:center;
}

.hero__h1{
  font-size:clamp(1.55rem,7.6vw,3.1rem);
  font-weight:900;line-height:1;letter-spacing:-.035em;margin:0 0 20px;
}
.hero__h1 span{display:block}
.hero__h1--accent{
  color:transparent;
  background:linear-gradient(96deg,var(--teal-bright) 0%,var(--teal) 45%,#8FE3ED 100%);
  -webkit-background-clip:text;background-clip:text;
}
.hero__sub{
  font-size:clamp(.97rem,1.15vw + .72rem,1.16rem);
  color:rgba(255,255,255,.78);max-width:53ch;margin-bottom:26px;
}
.hero__sub strong{color:#fff;font-weight:600}

/* enquanto os dois botões não couberem lado a lado, cada um ocupa a linha */
.hero__acts{display:flex;flex-wrap:wrap;gap:10px}
.hero__acts .btn{flex:1 1 230px}

/* --- cubo isométrico --------------------------------------------------- */
/* Toda a geometria deriva de --u (a aresta do cubo): mudando --u o conjunto
   inteiro encolhe junto, sem transform:scale por cima da animação.        */
.hero__art{
  display:flex;justify-content:center;align-items:center;
  /* --u mora aqui para o respiro acompanhar o tamanho do cubo */
  --u:clamp(64px,13vw,112px);
  /* o cubo de cima sobe na animação e passa da caixa do .iso — sem este
     respiro ele encosta nos botões enquanto o hero está empilhado */
  padding-top:calc(var(--u) * .34);
}
.iso{
  --o:calc(var(--u) * -.507);     /* recentraliza os 4 cubos sobre a origem */
  --corredor:0px;                 /* coluna de rótulos ao lado do desenho */
  position:relative;
  /* item de flex não pode encolher: se encolhesse, o corredor comeria o
     desenho e os losangos voltariam a cair em cima das faces */
  flex:none;
  width:calc(var(--u) * 2.87 + var(--corredor) * 2);
  height:calc(var(--u) * 2.7);
  padding-inline:var(--corredor);
  display:grid;place-items:center;margin-inline:auto;
}
/* Isometria: rotateX(58deg) rotateZ(45deg) deixa visíveis as faces +z, +y e +x. */
.iso__stage{
  position:relative;width:var(--u);height:var(--u);
  transform-style:preserve-3d;
  transform:rotateX(58deg) rotateZ(45deg) translate3d(var(--o),var(--o),var(--o));
  animation:isoDrift 16s ease-in-out infinite;
}
@keyframes isoDrift{
  0%,100%{transform:rotateX(58deg) rotateZ(45deg) translate3d(var(--o),var(--o),var(--o))}
  50%    {transform:rotateX(54deg) rotateZ(52deg) translate3d(var(--o),var(--o),calc(var(--u) * -.413))}
}
.iso__cube{position:absolute;inset:0;transform-style:preserve-3d}
.iso__cube i{
  position:absolute;inset:0;display:block;
  border:1px solid rgba(255,255,255,.18);
}
/* faces: 1 topo (+z) · 2 esquerda (+y) · 3 direita (+x) */
.iso__cube i:nth-child(1){transform:translateZ(calc(var(--u) * .5));background:var(--face-top)}
.iso__cube i:nth-child(2){transform:rotateX(-90deg) translateZ(calc(var(--u) * .5));background:var(--face-l)}
.iso__cube i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--u) * .5));background:var(--face-r)}

/* Cores medidas pixel a pixel em assets/img/partnererp.png: âmbar em cima,
   azul à esquerda, vermelho à direita. Três tons por cubo, na ordem da marca:
   a face de cima é a ESCURA (o tom do topo na logo), a esquerda é a mais clara
   (o tom das faces na logo) e a direita fica no meio das duas — é ela que
   devolve o volume que a marca resolve só com a aresta.
   O cubo --a fica escondido embaixo do --d e só aparece quando ele sobe, então
   leva o teal da paleta do site — é o respiro de cor no meio do conjunto. */
.iso__cube--a{--face-top:#17808C;--face-l:#26B6C6;--face-r:#1E9BAA;
  transform:translate3d(0,0,0)}
.iso__cube--b{--face-top:#CD484B;--face-l:#EF6A6A;--face-r:#DE595A;
  transform:translate3d(calc(var(--u) * 1.013),0,0)}
.iso__cube--c{--face-top:#0F71C7;--face-l:#3AA2EB;--face-r:#2489D9;
  transform:translate3d(0,calc(var(--u) * 1.013),0)}
.iso__cube--d{--face-top:#EC9821;--face-l:#FFBD49;--face-r:#F5AA35;
  transform:translate3d(0,0,calc(var(--u) * 1.013));
  animation:isoLift 5.5s ease-in-out infinite;
}
@keyframes isoLift{
  0%,100%{transform:translate3d(0,0,calc(var(--u) * 1.013))}
  50%    {transform:translate3d(0,0,calc(var(--u) * 1.307))}
}

/* --- rótulos das áreas -------------------------------------------------
   Sete anotações, uma por aba da seção Módulos. O losango sempre aponta para
   o desenho: à esquerda o texto é alinhado à direita e o marcador fica no fim
   da linha; à direita é o espelho disso. Como o conjunto gira devagar
   (isoDrift), os rótulos não podem depender de encaixar entre as faces — por
   isso, do tablet para cima, eles saem para os corredores laterais.        */
.iso__label{
  position:absolute;
  font-family:var(--f-mono);font-size:clamp(.55rem,1.7vw,.68rem);
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.74);white-space:nowrap;
  text-shadow:0 1px 3px rgba(11,20,28,.6);
  padding-left:15px;
}
.iso__label::before{
  content:'';position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;
  border:1.5px solid var(--dot,var(--teal));transform:rotate(45deg);
}
/* o losango repete a cor do cubo que está cotando */
.iso__label--ges,.iso__label--ven{--dot:#FFBD49}                    /* cubo de cima  */
.iso__label--fin,.iso__label--com,.iso__label--est{--dot:#3AA2EB}   /* cubo da esq.  */
.iso__label--fis,.iso__label--exp{--dot:#EF6A6A}                    /* cubo da dir.  */

/* celular: sem corredor, só os quatro que cabem nos cantos vazios do hexágono */
.iso__label--fin,.iso__label--com,.iso__label--fis{display:none}
.iso__label--ges{top:1%;left:0}
.iso__label--est{bottom:0;left:0}
.iso__label--ven{top:1%;right:0;text-align:right;padding:0 15px 0 0}
.iso__label--exp{bottom:0;right:0;text-align:right;padding:0 15px 0 0}
.iso__label--ven::before,.iso__label--exp::before{left:auto;right:0}

/* --- faixa de números -------------------------------------------------- */
/* celular: 2 × 2 · desktop: 4 colunas com filete (bloco 11.3)             */
.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(38px,8vw,80px);
  border-top:1px solid rgba(255,255,255,.14);
}
.stats li{
  display:flex;align-items:baseline;gap:10px;
  padding:18px 14px 18px 0;
}
.stats li:nth-child(odd){border-right:1px solid rgba(255,255,255,.09)}
.stats li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}
.stats b{
  font-family:var(--f-display);font-weight:900;font-size:clamp(1.75rem,6vw,2.9rem);
  line-height:1;color:var(--teal-bright);letter-spacing:-.045em;font-variant-numeric:tabular-nums;
}
.stats span{
  font-family:var(--f-mono);font-size:clamp(.7rem,2.2vw,.76rem);letter-spacing:.03em;
  color:rgba(255,255,255,.82);line-height:1.35;
}
.stats small{display:block;color:rgba(255,255,255,.45);font-size:.7rem;letter-spacing:.02em}

/* ---------------------------------- 6. Seções --------------------------- */
.sec{position:relative;padding:clamp(56px,10vw,124px) 0}
.sec--paper{background:var(--paper)}
.sec--navy{background:var(--navy-800);color:#fff;overflow:hidden}
.sec--dark{background:var(--navy-900);color:#fff;overflow:hidden}

.sec--paper + .sec--paper{padding-top:0}

.dots{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0%,#000,transparent 75%);
}

.sec__head{max-width:760px;margin-bottom:clamp(30px,6vw,64px)}
.sec__h2{
  font-size:clamp(1.55rem,5.6vw,3rem);
  letter-spacing:-.03em;margin-bottom:14px;position:relative;z-index:1;
}
.sec__h2--light{color:#fff}
.sec__lead{color:var(--ink-soft);font-size:clamp(.95rem,.7vw + .82rem,1.1rem);max-width:62ch;margin:0}
.sec__lead--light{color:rgba(255,255,255,.68)}

/* --- 6.1 Recursos ------------------------------------------------------ */
/* min(100%,255px) impede que o auto-fit peça mais largura do que existe   */
.feats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.feat{
  background:var(--white);padding:24px 20px 22px;position:relative;
  transition:background .25s,transform .25s var(--ease);
}
.feat::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--teal);transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--ease);
}
.feat:hover{background:#fff}
.feat:hover::before{transform:scaleY(1)}
.feat__n{
  font-family:var(--f-mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  color:var(--navy-400);display:block;margin-bottom:12px;
}
.feat h3{font-size:1.08rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px;color:var(--navy-800)}
.feat p{margin:0;font-size:.92rem;color:var(--ink-soft);line-height:1.6}

/* --- 6.2 Módulos ------------------------------------------------------- */
.mods{position:relative;z-index:1}

/* abas de categoria — as mesmas da central de módulos */
.mods__tabs{margin-bottom:18px}
.mod-tab{
  display:inline-flex;align-items:center;gap:8px;
  min-height:var(--tap);
  padding:9px 14px;border-radius:100px;
  border:1px solid rgba(255,255,255,.14);
  font-size:.85rem;font-weight:600;color:rgba(255,255,255,.66);letter-spacing:-.01em;
  transition:color .2s,border-color .2s,background .2s;
}
.mod-tab b{
  font-family:var(--f-mono);font-size:.68rem;font-weight:600;
  padding:2px 7px;border-radius:100px;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.55);
  transition:background .2s,color .2s;
}
.mod-tab:hover{color:#fff;border-color:rgba(255,255,255,.32)}
.mod-tab.is-on{background:var(--teal);border-color:var(--teal);color:var(--navy-900)}
.mod-tab.is-on b{background:rgba(22,33,44,.16);color:var(--navy-900)}

.mods__grupo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:12px;
  animation:panelIn .45s var(--ease) both;
}
.mods__grupo[hidden]{display:none}

.mod{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r);padding:22px 18px 20px;
  transition:border-color .25s,background .25s,transform .25s var(--ease);
}
.mod:hover{border-color:rgba(38,182,198,.55);background:rgba(38,182,198,.06);transform:translateY(-3px)}
.mod h3{
  display:flex;align-items:center;gap:12px;
  font-size:1rem;font-weight:700;letter-spacing:-.015em;color:#fff;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.09);
}
.mod p{
  margin:0;font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.62);
  transition:color .18s;
}
.mod:hover p{color:rgba(255,255,255,.8)}

.mods__foot{
  margin:30px 0 0;text-align:center;color:rgba(255,255,255,.55);
  font-size:.92rem;position:relative;z-index:1;
}
.mods__foot a{color:var(--teal-bright);border-bottom:1px solid rgba(62,217,232,.4);padding-bottom:1px}
.mods__foot a:hover{border-bottom-color:var(--teal-bright)}

/* marca do Partner como ícone (símbolo #ico-cubos, no topo do HTML) ------ */
/* As três faces leem --c-top / --c-l / --c-r, que continuam sendo definidas
   por posição do módulo e por tom do segmento logo abaixo. */
.mod__ico,.seg-tab__ico{
  width:22px;height:22px;flex:none;
  --c-top:var(--teal-bright);--c-l:var(--teal);--c-r:var(--teal-deep);
}
.mod:nth-child(6n+1) .mod__ico{--c-top:#3ED9E8;--c-l:#1E9BAA;--c-r:#137886}
.mod:nth-child(6n+2) .mod__ico{--c-top:#F9BE4E;--c-l:#DE9A22;--c-r:#B77C18}
.mod:nth-child(6n+3) .mod__ico{--c-top:#4FB0EC;--c-l:#2B93D6;--c-r:#1C7CBF}
.mod:nth-child(6n+4) .mod__ico{--c-top:#F4787C;--c-l:#DF5359;--c-r:#B94146}
.mod:nth-child(6n+5) .mod__ico{--c-top:#7FD3A5;--c-l:#4CAF7D;--c-r:#368E62}
.mod:nth-child(6n+6) .mod__ico{--c-top:#9AAECD;--c-l:#6B87A8;--c-r:#4E6A8B}

/* --- 6.3 Segmentos ----------------------------------------------------- */
.segs{position:relative}

/* No celular as abas viram uma tira que rola na horizontal e sangra até a
   borda da tela; a partir de 900px voltam a quebrar em linhas (bloco 11.3). */
.tabs-strip{
  display:flex;gap:8px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  padding-bottom:8px;
  scrollbar-width:thin;
}
.tabs-strip > *{flex:none;scroll-snap-align:start;white-space:nowrap}
.tabs-strip::-webkit-scrollbar{height:4px}
.tabs-strip::-webkit-scrollbar-thumb{background:rgba(107,135,168,.5);border-radius:4px}

.segs__tabs{margin-bottom:18px}
.seg-tab{
  display:inline-flex;align-items:center;gap:9px;
  min-height:var(--tap);
  padding:10px 16px;border-radius:100px;
  border:1px solid var(--line);background:var(--white);
  font-size:.88rem;font-weight:600;color:var(--ink-soft);letter-spacing:-.01em;
  transition:border-color .2s,color .2s,background .2s,box-shadow .2s,transform .2s var(--ease);
}
.seg-tab:hover{color:var(--navy-700);border-color:var(--navy-400);transform:translateY(-2px)}
.seg-tab.is-on{
  background:var(--navy-700);border-color:var(--navy-700);color:#fff;
  box-shadow:var(--sh-2);
}
.seg-tab[data-tone="amber"] .seg-tab__ico{--c-top:#F9BE4E;--c-l:#DE9A22;--c-r:#B77C18}
.seg-tab[data-tone="blue"]  .seg-tab__ico{--c-top:#4FB0EC;--c-l:#2B93D6;--c-r:#1C7CBF}
.seg-tab[data-tone="red"]   .seg-tab__ico{--c-top:#F4787C;--c-l:#DF5359;--c-r:#B94146}
.seg-tab[data-tone="green"] .seg-tab__ico{--c-top:#7FD3A5;--c-l:#4CAF7D;--c-r:#368E62}
.seg-tab[data-tone="teal"]  .seg-tab__ico{--c-top:#3ED9E8;--c-l:#1E9BAA;--c-r:#137886}

[data-tone="amber"]{--tone:#DE9A22;--tone-soft:rgba(249,190,78,.13)}
[data-tone="blue"] {--tone:#2B93D6;--tone-soft:rgba(79,176,236,.13)}
[data-tone="red"]  {--tone:#DF5359;--tone-soft:rgba(244,120,124,.13)}
[data-tone="green"]{--tone:#4CAF7D;--tone-soft:rgba(127,211,165,.14)}
[data-tone="teal"] {--tone:#1E9BAA;--tone-soft:rgba(62,217,232,.13)}

.seg-panel{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:26px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,5vw,48px);
  box-shadow:var(--sh-1);
  position:relative;overflow:hidden;
  animation:panelIn .45s var(--ease) both;
}
.seg-panel[hidden]{display:none}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.seg-panel::before{
  content:'';position:absolute;left:0;top:0;right:0;height:4px;background:var(--tone);
}
.seg-panel__txt{position:relative;z-index:1;min-width:0}
.seg-panel__txt h3{
  font-size:clamp(1.3rem,4.6vw,2.05rem);letter-spacing:-.03em;
  color:var(--navy-800);margin-bottom:10px;
}
.seg-panel__txt > p{color:var(--ink-soft);max-width:56ch;margin-bottom:20px}

.ticks li{
  position:relative;padding-left:28px;margin-bottom:12px;
  font-size:.93rem;color:var(--ink);line-height:1.55;
}
.ticks li strong{color:var(--navy-700);font-weight:600}
.ticks li::before{
  content:'';position:absolute;left:0;top:.42em;width:12px;height:12px;
  background:var(--tone);clip-path:polygon(50% 0,100% 25%,50% 50%,0 25%);
}
/* metade inferior do cubo (as duas faces laterais em um só elemento) */
.ticks li::after{
  content:'';position:absolute;left:0;top:.42em;width:12px;height:12px;
  background:var(--tone);
  background:color-mix(in srgb,var(--tone) 72%,#000);
  clip-path:polygon(0 25%,50% 50%,100% 25%,100% 75%,50% 100%,0 75%);
}

/* o desenho do ramo ocupa a coluna da direita do painel; o traço herda o
   --tone do segmento, então cada aba tem a sua cor sem CSS extra */
.seg-arte{
  position:relative;z-index:1;align-self:center;justify-self:center;
  display:grid;place-items:center;
  width:100%;max-width:264px;aspect-ratio:1;
  color:var(--tone);
}
/* o tom do ramo entra pelo halo atrás do desenho — é o único ponto de cor do
   painel além do filete do topo */
.seg-arte::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 48%,var(--tone-soft) 0%,transparent 70%);
}
.seg-arte svg{position:relative;width:82%;height:auto;opacity:.92}

/* recado de que a lista de ramos não é exaustiva */
.segs__foot{
  margin:26px 0 0;text-align:center;color:var(--ink-soft);
  font-size:.92rem;max-width:62ch;margin-inline:auto;
}
.segs__foot a{color:var(--teal-deep);font-weight:600;border-bottom:1px solid rgba(23,128,140,.4);padding-bottom:1px}
.segs__foot a:hover{border-bottom-color:var(--teal-deep)}

/* --- 6.4 Telas (prints reais, um carrossel por módulo) ----------------- */
.shots{position:relative;z-index:1;max-width:1040px;margin-inline:auto}
.shots__tabs{margin-bottom:16px}
.shot-tab{
  min-height:var(--tap);
  padding:9px 15px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.14);
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.05em;
  color:rgba(255,255,255,.62);transition:all .2s var(--ease);
}
.shot-tab:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.shot-tab.is-on{background:var(--teal);border-color:var(--teal);color:var(--navy-900);font-weight:600}

/* no celular o quadro sangra até a borda da tela: é o que dá mais alguns
   pixels de largura para o print, que já é apertado nesse tamanho */
.shot{
  margin:0 calc(var(--gut) * -1);border-radius:0;overflow:hidden;
  box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.1);border-inline-width:0;
  animation:panelIn .45s var(--ease) both;
}
.shot[hidden]{display:none}
.shot__bar{
  display:flex;align-items:center;gap:9px;
  background:var(--navy-700);padding:7px 9px;
}
.shot__mark{width:18px;height:18px;flex:none;object-fit:contain}
.shot__title{
  font-family:var(--f-mono);font-size:.72rem;color:rgba(255,255,255,.86);letter-spacing:.04em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shot__title-app{display:none}   /* "Partner —" só quando há largura de sobra */

/* ampliar, setas e contador moram na barra da janela */
.shot__acoes{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.carrossel__nav{display:flex;align-items:center;gap:3px}
.carrossel__seta{
  width:32px;height:32px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.18);color:#fff;
  transition:background .18s,border-color .18s,opacity .18s;
}
.carrossel__seta svg{width:16px;height:16px}
.carrossel__seta:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34)}
.carrossel__seta[disabled]{opacity:.26;cursor:default;background:none;border-color:rgba(255,255,255,.18)}
.carrossel__conta{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.04em;padding:0 5px;
  color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;
}
.carrossel__conta b{color:#fff;font-weight:600}

/* trilho: um print por vez, com encaixe — no celular arrasta com o dedo */
.carrossel__trilho{
  display:flex;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  background:var(--navy-850);
  scrollbar-width:none;
}
.carrossel__trilho::-webkit-scrollbar{display:none}
.carrossel__slide{
  position:relative;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;place-items:center;padding:0;
}
/* o print nunca é ampliado além do tamanho real: as janelas menores
   (parcelamento, comanda) continuam nítidas em vez de esticadas */
.carrossel__img{
  max-width:100%;height:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
/* legenda = a lista de prints do módulo, e ela também navega */
.shot__cap{background:var(--navy-850);padding:9px 10px}
.carrossel__pontos{
  display:flex;gap:6px;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;
  padding-bottom:3px;
}
.carrossel__pontos::-webkit-scrollbar{height:4px}
.carrossel__pontos::-webkit-scrollbar-thumb{background:rgba(107,135,168,.5);border-radius:4px}
.carrossel__ponto{
  display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;
  padding:8px 12px;border-radius:100px;
  border:1px solid rgba(255,255,255,.12);
  font-size:.77rem;color:rgba(255,255,255,.6);
  transition:color .18s,border-color .18s,background .18s;
}
.carrossel__ponto i{
  font-style:normal;font-family:var(--f-mono);font-size:.64rem;
  width:18px;height:18px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);
  transition:background .18s,color .18s;
}
.carrossel__ponto:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.carrossel__ponto.is-on{background:rgba(38,182,198,.14);border-color:var(--teal);color:#fff}
.carrossel__ponto.is-on i{background:var(--teal);color:var(--navy-900)}

/* --- 6.5 Empresa ------------------------------------------------------- */
.emp{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,6vw,72px);align-items:start}
.emp__txt p{color:var(--ink-soft)}
.emp__txt strong{color:var(--navy-700);font-weight:600}
.emp__txt em{font-style:italic;color:var(--navy-700)}
.emp__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.emp__pills span{
  font-family:var(--f-mono);font-size:.71rem;letter-spacing:.04em;
  padding:8px 13px;border-radius:100px;
  background:var(--white);border:1px solid var(--line);color:var(--navy-700);
}
.emp__card{
  background:var(--navy-700);color:#fff;border-radius:var(--r-lg);
  padding:clamp(22px,5vw,36px);box-shadow:var(--sh-2);position:relative;overflow:hidden;
}
.emp__card::before{
  content:'';position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:20px 20px;
}
.emp__mark{width:42px;height:42px;object-fit:contain;margin-bottom:20px;position:relative}
.emp__card dl{margin:0 0 22px;position:relative}
.emp__card dl > div{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.emp__card dl > div:last-child{border-bottom:0}
.emp__card dt{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:4px}
.emp__card dd{margin:0;font-size:.92rem;font-weight:500;color:rgba(255,255,255,.92)}
.emp__card .btn--dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);position:relative}
.emp__card .btn--dark:hover{background:var(--teal);color:var(--navy-900)}

/* ---------------------------------- 7. CTA ------------------------------ */
.cta{
  position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding:clamp(58px,10vw,120px) 0;
  background:
    radial-gradient(80% 120% at 50% 0%,rgba(38,182,198,.28) 0%,transparent 60%),
    linear-gradient(160deg,var(--navy-700) 0%,var(--navy-850) 100%);
  color:#fff;
}
.cta__grid{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 80%);
}
.cta__in{max-width:760px}
.cta__cubes{display:flex;justify-content:center;margin-bottom:20px}
.cta__cubes img{width:50px;height:50px;object-fit:contain;animation:floaty 4.5s ease-in-out infinite;filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.cta h2{font-size:clamp(1.65rem,6.4vw,3.4rem);letter-spacing:-.035em;margin-bottom:14px;line-height:1.05}
.cta h2 br{display:none}          /* no celular a frase quebra sozinha */
.cta p{color:rgba(255,255,255,.72);max-width:56ch;margin:0 auto 26px}
.cta__acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cta__acts .btn{flex:1 1 230px}

/* ---------------------------------- 8. Rodapé --------------------------- */
.foot{background:var(--navy-900);color:rgba(255,255,255,.6);padding:clamp(44px,8vw,76px) 0 22px;font-size:.9rem}
.foot__top{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:30px;
  padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1);
}
.brand--foot{margin-bottom:16px}
.foot__brand p{max-width:38ch;line-height:1.6;font-size:.88rem}
.foot__col h3{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin-bottom:12px;font-weight:600;
}
.foot__col a{display:block;padding:8px 0;color:rgba(255,255,255,.62);transition:color .18s,transform .18s var(--ease)}
.foot__col a:hover{color:var(--teal-bright);transform:translateX(3px)}
.foot__col address{font-style:normal;line-height:1.6;margin-bottom:10px;color:rgba(255,255,255,.62)}
.foot__strong{font-family:var(--f-mono);font-size:1.02rem !important;color:#fff !important;font-weight:600;letter-spacing:.02em}
.foot__hours{margin-top:10px;font-size:.8rem;color:rgba(255,255,255,.4)}

.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.socials a{
  width:42px;height:42px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  transition:background .2s,border-color .2s,transform .2s var(--ease);
}
.socials svg{width:18px;height:18px;fill:rgba(255,255,255,.7);transition:fill .2s}
.socials a:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-3px)}
.socials a:hover svg{fill:var(--navy-900)}

.foot__bar{
  display:flex;flex-direction:column;gap:8px;
  padding-top:20px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.03em;color:rgba(255,255,255,.36);
}
.foot__bar p{margin:0}

/* ---------------------------------- 9. WhatsApp flutuante --------------- */
.wa-float{
  position:fixed;z-index:90;
  right:max(14px,env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  width:52px;height:52px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(37,211,102,.42);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.wa-float svg{width:27px;height:27px;fill:#fff}
.wa-float::after{
  content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.55);opacity:0}
  100%{opacity:0}
}
.wa-float:hover{transform:scale(1.08);box-shadow:0 12px 34px rgba(37,211,102,.55)}
.wa-float__tip{
  display:none;                   /* o balão só aparece onde há ponteiro (11.7) */
  position:absolute;right:70px;top:50%;transform:translateY(-50%) translateX(8px);
  background:var(--navy-900);color:#fff;font-size:.78rem;font-weight:500;
  padding:8px 13px;border-radius:var(--r-sm);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);
  box-shadow:var(--sh-2);
}
.wa-float:hover .wa-float__tip{opacity:1;transform:translateY(-50%) translateX(0)}

/* --------------------------------- 10. Reveal --------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}

/* --------------------------------- 11. Responsivo ----------------------- */
/* Daqui para baixo o layout só cresce. Ordem: 480 → 640 → 900 → 1024 →
   1280 → 1600 e, no fim, os ajustes por tipo de ponteiro e por altura.    */

/* --- 11.1 · 480px — celular grande -------------------------------------- */
@media (min-width:480px){
  .feat{padding:28px 24px 26px}
  .mod{padding:24px 22px 22px}
  .cta__cubes img{width:58px;height:58px}
  .foot__bar{flex-direction:row;flex-wrap:wrap;gap:10px;justify-content:space-between}
}

/* --- 11.2 · 640px — celular deitado / tablet pequeno -------------------- */
@media (min-width:640px){
  :root{--nav-h:70px}

  .btn{padding:15px 24px}
  .btn--lg{padding:17px 30px;font-size:1rem}

  .hero__h1{margin-bottom:24px}
  .hero__sub{margin-bottom:30px}

  .cta h2 br{display:inline}

  .shot{margin-inline:0;border-radius:var(--r);border-inline-width:1px}
  .carrossel__slide{padding:10px}
  .carrossel__img{border-radius:4px}
  .shot__title-app{display:inline}

  .foot__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}

  /* o desenho passa a ser cotado dos dois lados */
  .iso{--corredor:6.4rem}
  /* a cota é ancorada pela borda que encosta no desenho e a caixa se ajusta ao
     texto (width:auto), senão um nome comprido estoura para cima do losango */
  .iso__label{width:auto;bottom:auto;transform:translateY(-50%)}
  .iso__label--fin,.iso__label--com,.iso__label--fis{display:block}

  .iso__label--ges,.iso__label--fin,.iso__label--com,.iso__label--est{
    left:auto;right:calc(100% - var(--corredor) - var(--dx,0px));
    text-align:right;padding:0 22px 0 0;
  }
  .iso__label--ges::before,.iso__label--fin::before,
  .iso__label--com::before,.iso__label--est::before{left:auto;right:7px}

  .iso__label--ven,.iso__label--fis,.iso__label--exp{
    right:auto;left:calc(100% - var(--corredor) - var(--dx,0px));
    text-align:left;padding:0 0 0 22px;
  }
  .iso__label--ven::before,.iso__label--fis::before,.iso__label--exp::before{right:auto;left:7px}

  /* Cada cota fica a uma distância constante do contorno, não de uma coluna:
     --dx é o quanto o losango entra (+) ou sai (−) da caixa do desenho, em
     função da aresta do cubo. O hexágono é estreito em cima e embaixo e largo
     na cintura, então as cotas do meio avançam e as das pontas recuam. */
  .iso__label--ges{top:22%;--dx:calc(var(--u) * .40)}
  .iso__label--fin{top:41%;--dx:calc(var(--u) * -.20)}
  .iso__label--com{top:68%;--dx:calc(var(--u) * -.20)}
  .iso__label--est{top:93%;--dx:calc(var(--u) * .26)}

  .iso__label--ven{top:27%;--dx:calc(var(--u) * .23)}
  .iso__label--fis{top:64%;--dx:calc(var(--u) * -.12)}
  .iso__label--exp{top:91%;--dx:calc(var(--u) * .26)}
}

/* --- 11.3 · 900px — tablet · menu horizontal ---------------------------- */
@media (min-width:900px){
  :root{--nav-h:76px}

  .nav__in{padding:14px var(--gut);gap:24px}
  .brand{gap:12px}
  .brand__mark{width:34px;height:34px}
  .brand__txt strong{font-size:1.16rem}
  .brand__txt em{font-size:.9rem}

  /* o painel suspenso volta a ser uma barra de links */
  .nav__links{
    position:static;flex-direction:row;gap:4px;margin-left:auto;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:0;border-bottom:0;box-shadow:none;
    max-height:none;overflow:visible;
    transform:none;visibility:visible;transition:none;
  }
  .nav__links a{min-height:0;padding:9px 12px;font-size:.88rem;border-bottom:0;white-space:nowrap}
  .nav__links a::after{display:block}
  .nav__links + .nav__cta{margin-left:0}
  .burger{display:none}

  /* faixa de números: 4 colunas separadas por filete */
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stats li{padding:26px 22px 0 0;border-right:1px solid rgba(255,255,255,.09)}
  .stats li:nth-child(n+3){border-top:0}
  .stats li:last-child{border-right:0}

  /* as abas voltam a quebrar em linhas, sem tira rolante */
  .tabs-strip{
    flex-wrap:wrap;overflow:visible;
    margin-inline:0;padding-inline:0;padding-bottom:0;
    scroll-snap-type:none;
  }
  .segs__tabs{margin-bottom:26px}
  .shots__tabs{margin-bottom:20px;gap:6px}
  .seg-tab{padding:11px 18px;font-size:.9rem}
  .shot-tab{padding:10px 18px;font-size:.78rem}

  .shot__bar{padding:9px 12px;gap:11px}
  .shot__title{font-size:.76rem}
  .carrossel__seta{width:34px;height:34px}
  .carrossel__slide{padding:14px}
  .shot__cap{padding:12px 14px}

  .feat{padding:32px 28px 30px}
  .mods__tabs{margin-bottom:26px}
  .mods__grupo{gap:14px}
  .mod{padding:26px 24px 24px}
  .mod h3{font-size:1.02rem}
}

/* --- 11.4 · 1024px — desktop: hero e painéis em duas colunas ------------ */
@media (min-width:1024px){
  .hero{padding-top:calc(var(--nav-h) + clamp(46px,8vh,110px))}
  .hero__in{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:clamp(32px,4vw,64px);
  }
  .hero__h1{font-size:clamp(2.5rem,4vw,3.15rem);line-height:.98;letter-spacing:-.04em;margin-bottom:26px}
  .hero__sub{margin-bottom:34px}
  .hero__acts .btn{flex:0 0 auto}
  /* em duas colunas nada fica acima do cubo: ele cresce e dispensa o respiro */
  /* as cotas da esquerda avançam para fora do desenho, então o conjunto anda
     um pouco para a direita para não chegar perto do texto do hero */
  .hero__art{--u:clamp(88px,8.6vw,132px);padding-top:0;padding-left:clamp(10px,2.2vw,32px)}

  .seg-panel{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,3.5vw,52px)}

  .emp{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr)}
  .emp__mark{width:48px;height:48px;margin-bottom:24px}

  .cta__acts .btn{flex:0 0 auto}

  .foot__top{
    grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.75fr)) minmax(0,1.05fr);
    gap:clamp(26px,3.5vw,52px);padding-bottom:40px;
  }
  .foot__col a{padding:5px 0}

  .wa-float{width:58px;height:58px;right:20px;bottom:calc(20px + env(safe-area-inset-bottom))}
  .wa-float svg{width:31px;height:31px}
}

/* --- 11.5 · 1280px — desktop largo -------------------------------------- */
@media (min-width:1280px){
  .nav__links a{padding:9px 14px;font-size:.9rem}
  .nav__cta .btn--wa{padding:10px 16px}
  .nav__cta .btn--wa span{display:inline}   /* aqui já cabem o número e a assinatura */
  .brand__txt small{display:block}

  .hero__grid{background-size:64px 64px}
  .cta__grid{background-size:48px 48px}
}

/* --- 11.6 · 1600px — telas muito grandes -------------------------------- */
@media (min-width:1600px){
  :root{--wrap:1320px}
  .hero__h1{font-size:3.4rem}
  .hero__art{--u:140px}
}

/* --- 11.7 · Ponteiro fino (mouse) --------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .wa-float__tip{display:block}
}

/* --- 11.8 · Sem hover (toque): nenhum estado fica preso ----------------- */
@media (hover:none){
  .btn:hover,.mod:hover,.seg-tab:hover,.socials a:hover,.wa-float:hover,.feat:hover{transform:none}
  .brand:hover .brand__mark{transform:none}
  .btn:hover .ico-arr{transform:none}
  .foot__col a:hover{transform:none}
}

/* --- 11.9 · Tela baixa e deitada (celular na horizontal) ---------------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:calc(var(--nav-h) + 24px);padding-bottom:40px}
  .hero__art{display:none}
}

/* --------------------------------- 12. A11y / impressão ----------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .nav,.wa-float,.cta__grid,.hero__grid,.dots{display:none !important}
  body{background:#fff;color:#000}
  .sec--navy,.sec--dark,.cta,.foot,.hero{background:#fff !important;color:#000 !important}
  .carrossel__trilho{overflow:visible;aspect-ratio:auto}
  .shot__acoes,.carrossel__pontos{display:none !important}
  .carrossel__slide:not(:first-child){display:none}
}