/* ==========================================================================
   Home da Vazto (versão 2) — sections

   The system lives in vazto.css; this file only composes. Every section is
   drawn for what it has to say, so the page reads as designed section by
   section rather than assembled from one card component. "Box + icon + title +
   text" appears exactly once, on the discipline rail, where a rail is genuinely
   the right shape.
   ========================================================================== */

.skip{
  position:absolute; inset-block-start:-60px; inset-inline-start:12px; z-index:99;
  padding:10px 16px; border-radius:0 0 10px 10px; background:var(--cyan); color:var(--ink);
  font-weight:600; transition:inset-block-start .2s ease;
}
.skip:focus{ inset-block-start:0 }

/* ==========================================================================
   Masthead — full navigation, integrated with the hero, condenses on scroll
   ========================================================================== */
.mast{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:60;
  color:var(--on-dark); transition:background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-block-end:1px solid transparent;
}
/* Ao rolar, a barra deixa de estar sobre o hero e passa a atravessar secções
   claras e escuras. A partir daí traz o seu próprio fundo, e traz um que não
   depende do que está por trás: 92% do tinto da marca sobre branco continua
   quase preto, e o logo branco continua a existir. O desfoque é o que impede
   isto de parecer uma tarja colada. */
.mast.is-stuck{
  background:color-mix(in srgb,var(--ink) 92%,transparent);
  backdrop-filter:saturate(1.6) blur(20px); -webkit-backdrop-filter:saturate(1.6) blur(20px);
  border-block-end-color:rgba(7,210,210,.2);
  box-shadow:0 18px 40px -34px rgba(0,0,0,.9);
}
/* Sem desfoque disponível, o fundo tem de ser opaco — senão a página passa
   por trás dela. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mast.is-stuck{ background:var(--ink) }
}
.mast__row{ display:flex; align-items:center; gap:26px; min-block-size:var(--mast) }
.mast__logo img{ width:140px; transition:width .3s ease }
.mast.is-stuck .mast__logo img{ width:120px }
.mast__nav{ display:flex; align-items:center; gap:26px; margin-inline-start:auto; font-size:14.5px; font-weight:500 }
.mast__nav a{
  position:relative; color:rgba(241,247,247,.88); padding-block:6px; transition:color .2s ease;
}
.mast__nav a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  inline-size:0; block-size:1.5px; background:var(--cyan); transition:inline-size .26s var(--ease);
}
.mast__nav a:hover{ color:#fff }
.mast__nav a:hover::after{ inline-size:100% }
.mast__end{ display:flex; align-items:center; gap:16px }
.langs{ display:flex; align-items:center; gap:5px }
.langs img{ inline-size:26px; block-size:18px; object-fit:cover; border-radius:2px; opacity:.7; transition:opacity .2s ease, transform .2s ease }
.langs a:hover img,.langs a[aria-current] img{ opacity:1; transform:translateY(-1px) }
/* The masthead sits on the dark hero but is not inside .g-dark, so the ghost
   button has to be told which ground it is on. */
.mast__cta{
  min-block-size:40px; padding-inline:18px; font-size:14px;
  color:#eafeff; border-color:rgba(7,210,210,.45);
}
.mast__cta:hover{ border-color:var(--cyan); background:rgba(7,210,210,.12) }
.burger{ display:none; width:28px; gap:5px; padding-block:6px }
.burger span{ display:block; block-size:2px; background:#fff; border-radius:2px; transition:.25s var(--ease) }

.drawer{
  position:fixed; inset:0; z-index:80; background:rgba(3,7,13,.97);
  display:grid; align-content:center; justify-items:center; gap:22px; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.drawer.is-open{ opacity:1; visibility:visible }
.drawer__nav{ display:grid; justify-items:center; gap:18px }
.drawer__nav a{ font-family:var(--display); font-weight:700; font-size:23px; color:#fff }
.drawer__nav a:hover{ color:var(--cyan) }
.drawer__close{ position:absolute; inset-block-start:20px; inset-inline-end:22px; color:#fff; font-size:36px; line-height:1 }
.drawer__langs img{ inline-size:34px; block-size:24px }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-block-size:min(102vh,940px); display:flex; align-items:center;
  padding-block:calc(var(--mast) + 40px) 88px;
}
.hero__in{ display:flex; justify-content:center }
/* Centrado e no eixo: o hero da empresa não divide a dobra com nada. */
.hero__copy{ position:relative; z-index:3; max-inline-size:74ch; text-align:center }
.hero__copy .h1{ margin-block-start:16px }
.hero__copy .lede{ margin-block-start:22px; max-inline-size:62ch; margin-inline:auto }
.hero__copy .actions{ justify-content:center }

/* A hélice ocupa a secção inteira; o canvas é textura, não conteúdo. */
.hero__dna{
  position:absolute; inset:0; z-index:1; inline-size:100%; block-size:100%;
  pointer-events:none;
}
/* Sem esta cortina a hélice passa por trás das palavras com brilho suficiente
   para as sujar. Escurece o eixo central e devolve as pontas ao fundo. */
.hero__veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% 50%, rgba(3,7,13,.86) 0%, rgba(3,7,13,.62) 42%, transparent 78%),
    linear-gradient(180deg, rgba(3,7,13,.5) 0%, transparent 26%, transparent 74%, rgba(3,7,13,.62) 100%);
}
/* Num ecrã estreito o texto ocupa quase toda a largura, e a mesma cortina
   deixa de ser suficiente: a hélice passa por trás das palavras. Aqui ela
   recua para o fundo em vez de disputar a leitura. */
@media (max-width:760px){
  .hero__veil{
    background:
      radial-gradient(84% 42% at 50% 48%, rgba(3,7,13,.94) 0%, rgba(3,7,13,.82) 46%, rgba(3,7,13,.4) 76%, transparent 100%),
      linear-gradient(180deg, rgba(3,7,13,.62) 0%, transparent 22%, transparent 72%, rgba(3,7,13,.7) 100%);
  }
}

.hero__cue{
  position:absolute; inset-block-end:26px; inset-inline-start:50%; translate:-50% 0; z-index:4;
  inline-size:24px; block-size:38px; border-radius:12px;
  border:1.5px solid rgba(241,247,247,.4); display:grid; justify-items:center; padding-block-start:7px;
}
.hero__cue span{ inline-size:3px; block-size:7px; border-radius:2px; background:var(--cyan) }
@media (prefers-reduced-motion:no-preference){
  .hero__cue span{ animation:cue 1.9s ease-in-out infinite }
}
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:1 } 60%{ transform:translateY(11px); opacity:.15 } }

/* Reveal cadence for the hero block only. */
.hero .rv{ transition-delay:calc(var(--d,0) * 120ms) }
.hero .rv[data-d="0"]{ --d:0 } .hero .rv[data-d="1"]{ --d:1 }
.hero .rv[data-d="2"]{ --d:2 } .hero .rv[data-d="3"]{ --d:3 }

/* ==========================================================================
   2 · O QUE FAZEMOS
   ========================================================================== */
.what{ padding-block:64px }
.what__line{
  font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(24px,5vw,40px); line-height:1.14; text-align:center;
  max-inline-size:20ch; margin-inline:auto;
}
.what__line em{ font-style:normal; color:var(--teal) }
.what__rail{
  margin-block-start:40px; display:grid; gap:1px;
  grid-template-columns:repeat(7,minmax(0,1fr));
  background:var(--rule); border-block:1px solid var(--rule);
}
.what__rail li{
  background:var(--paper); padding:22px 10px; text-align:center;
  display:grid; justify-items:center; gap:10px;
  transition:background-color .25s ease, transform .25s var(--ease);
  transition-delay:var(--d,0ms);
}
.what__rail li:hover{ background:rgba(2,115,115,.05); transform:translateY(-3px) }
.what__rail .ico{ inline-size:26px; block-size:26px; color:var(--teal) }
.what__rail span{ font-size:14px; font-weight:600; letter-spacing:-.01em }

/* ==========================================================================
   3 · CONVERSÃO
   ========================================================================== */
/* Uma faixa, não uma secção: existe para dar saída a quem já decidiu, e não
   para competir com a narrativa que continua por baixo. Por isso é baixa,
   horizontal, e não repete o argumento — só a acção. */
.salto{ padding-block:clamp(30px,4vw,44px) }
.salto__in{ display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,4vw,52px); flex-wrap:wrap }
.salto__copy{ min-inline-size:0 }
.salto__h{ margin-block-start:8px; font-family:var(--display); font-weight:700; letter-spacing:-.026em;
  font-size:clamp(20px,3vw,27px); line-height:1.16; color:#fff }
.salto__p{ margin-block-start:6px; font-size:15px; line-height:1.5; color:rgba(241,247,247,.86); max-inline-size:52ch }
.salto .actions{ margin-block-start:0; flex:none }
@media (max-width:760px){ .salto__in{ flex-direction:column; align-items:flex-start } .salto .actions{ inline-size:100% } .salto .btn{ inline-size:100% } }

/* ==========================================================================
   3 · A VAZTO
   ========================================================================== */
.about__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.about__copy .h2{ margin-block-start:12px }
.about__copy .lede{ margin-block-start:18px }
.about__media{ position:relative }
/* The still ships with its own drop shadow baked in; cropping to the card face
   keeps it from reading as a grey band inside the rounded frame. */
.about__video{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 34px 70px -40px rgba(1,30,34,.8) }
.about__video img{ inline-size:100%; block-size:auto; aspect-ratio:500 / 328; object-fit:cover; object-position:left top }
.play{
  position:absolute; inset:0; margin:auto; inline-size:88px; block-size:88px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(160deg,rgba(7,210,210,.92),rgba(2,81,89,.92));
  box-shadow:0 0 0 10px rgba(255,255,255,.14), 0 18px 40px -18px rgba(0,0,0,.9);
  transition:transform .28s var(--ease), box-shadow .28s ease;
}
.play svg{ inline-size:34px; block-size:34px; margin-inline-start:4px }
.play:hover{ transform:scale(1.07); box-shadow:0 0 0 14px rgba(7,210,210,.18), 0 18px 40px -18px rgba(0,0,0,.9) }
.about__facts{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-block-start:-34px; margin-inline:22px 0; position:relative; z-index:3;
}
.about__facts > div{
  background:var(--paper); border:1px solid var(--rule); border-radius:14px;
  padding:16px 18px; box-shadow:0 20px 44px -34px rgba(1,30,34,.7);
}
.about__facts b{ display:block; font-family:var(--display); font-weight:700; font-size:34px; line-height:1; color:var(--teal-deep) }
.about__facts span{ display:block; margin-block-start:5px; font-size:13.5px; color:var(--text-soft); line-height:1.35 }

/* SOBRE-SEM-VIDEO */
/* Sem a miniatura do vídeo, a coluna direita ficava com dois números soltos
   num espaço desenhado para uma imagem. Os números passam a ser a peça: um
   cartão por número, empilhados, com o corpo que a coluna comporta. */
.about .about__facts{
  display:grid; gap:14px; margin:0; align-content:center;
}
.about .about__facts > div{
  padding:22px 24px; border-radius:18px;
  border:1px solid var(--rule); background:var(--paper);
  box-shadow:0 24px 54px -44px rgba(1,30,34,.5);
}
.about .about__facts b{
  display:block; font-family:var(--display); font-weight:700; line-height:1;
  font-size:clamp(38px,6vw,54px); letter-spacing:-.03em; color:var(--teal);
}
.about .about__facts span{
  display:block; margin-block-start:8px; font-size:14.5px; color:var(--text-soft);
}
@media (min-width:760px){
  .about .about__facts{ grid-template-columns:1fr 1fr }
}
@media (min-width:1000px){
  /* A coluna do texto encolhe: sem imagem, uma linha de 60ch lê-se melhor do
     que uma que ocupa metade de um ecrã largo. */
  .about__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) }
  .about .about__facts{ grid-template-columns:1fr }
}

/* ==========================================================================
   4 · CONVERGÊNCIA
   ========================================================================== */
.merge__stage{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:36px; align-items:center }
.merge__svg{ position:absolute; inset:0; inline-size:100%; block-size:100%; z-index:1; pointer-events:none }
.merge__line{ fill:none; stroke:rgba(7,210,210,.5); stroke-width:.35; vector-effect:non-scaling-stroke }
.merge__spark{ fill:var(--cyan-lit); opacity:.95 }
.merge__in{ position:relative; z-index:2; display:grid; gap:14px }
.merge__in li{
  background:rgba(241,247,247,.045); border:1px solid var(--rule-dark); border-radius:12px;
  padding:14px 18px; backdrop-filter:blur(3px);
}
.merge__in b{ display:block; font-family:var(--display); font-weight:700; font-size:18px; color:#fff }
.merge__in span{ display:block; margin-block-start:3px; font-size:14px; color:var(--on-dark-soft) }
.merge__out{
  position:relative; z-index:2; justify-self:center; text-align:center;
  inline-size:min(300px,100%); aspect-ratio:1; display:grid; place-content:center;
  padding-inline:34px;
}
.merge__halo{
  position:absolute; inset:0; border-radius:50%; z-index:-1;
  border:1.5px solid rgba(7,210,210,.55);
  background:radial-gradient(closest-side,rgba(7,210,210,.16),rgba(7,210,210,.03) 72%,transparent);
  box-shadow:0 0 60px -14px rgba(7,210,210,.55);
}
.merge__halo::after{
  content:""; position:absolute; inset:-22px; border-radius:50%;
  border:1px solid rgba(7,210,210,.22);
}
.merge__out b{
  font-family:var(--display); font-weight:700; font-size:clamp(19px,2.5vw,24px);
  line-height:1.22; color:#fff;
}

/* ==========================================================================
   5 · MÉTODO F.U.T.U.R.O.
   ========================================================================== */
.fut{ display:grid; gap:34px }
.fut__rail{
  position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px;
  padding-block-end:20px;
}
.fut__rail::before,.fut__rail::after{
  content:""; position:absolute; inset-block-end:8px; inset-inline-start:0;
  block-size:2px; border-radius:2px;
}
.fut__rail::before{ inline-size:100%; background:var(--rule) }
.fut__rail::after{
  inline-size:calc(var(--progress,0) * 100%); background:var(--teal);
  transition:inline-size .55s var(--ease);
}
.fut__step{
  display:grid; justify-items:center; gap:7px; padding-block:10px 20px;
  color:var(--text-soft); transition:color .25s ease, transform .25s var(--ease);
}
.fut__step:hover{ transform:translateY(-2px) }
.fut__letter{
  inline-size:52px; block-size:52px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-style:italic; font-size:22px;
  border:1.5px solid var(--rule); background:var(--paper); color:var(--teal-deep);
  transition:.3s var(--ease);
}
.fut__name{ font-size:13.5px; font-weight:600; letter-spacing:-.01em }
.fut__step.is-done .fut__letter{ border-color:color-mix(in srgb,var(--teal) 50%,transparent); color:var(--teal) }
.fut__step.is-on{ color:var(--text) }
.fut__step.is-on .fut__letter{
  background:linear-gradient(160deg,#03908f,var(--teal) 55%,#02585e); color:#fff; border-color:transparent;
  box-shadow:0 12px 26px -12px rgba(2,115,115,.9), 0 0 0 5px rgba(2,115,115,.1);
  transform:scale(1.08);
}
.fut__card{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:start;
  background:var(--paper); border:1px solid var(--rule); border-radius:18px;
  padding:26px 30px; box-shadow:0 28px 60px -44px rgba(1,30,34,.8);
}
.fut__plate{ inline-size:64px; block-size:64px; border-radius:18px; display:grid; place-items:center;
  background:radial-gradient(80% 70% at 30% 22%,#0a8f92 0%,#04656d 42%,#012e35 100%); color:var(--cyan-lit);
  box-shadow:inset 0 1.5px 0 rgba(160,255,255,.5), 0 12px 24px -14px rgba(1,46,53,.9) }
.fut__plate .ico{ inline-size:30px; block-size:30px }
.fut__card .h3{ margin-block-start:5px }
.fut__card p{ margin-block-start:9px; color:var(--text-soft); font-size:16px }
.fut__tag{ margin-block-start:12px !important; font-size:13.5px !important; color:var(--teal) !important; font-weight:600 }
.metodo .actions{ margin-block-start:30px }

/* ==========================================================================
   6 · TRADIÇÃO + FUTURO
   ========================================================================== */
.legacy__svg{ inline-size:100%; block-size:auto }
.lg-solid{ fill:var(--teal-deep); opacity:calc(.92 - var(--t) * .92) }
.lg-node{ fill:var(--teal); opacity:calc(var(--t) * .95) }
.lg-link{ stroke:var(--cyan); stroke-width:1; opacity:calc(var(--t) * var(--t) * .55) }
.legacy__labels{
  margin-block-start:26px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px;
  border-block-start:1px solid var(--rule); padding-block-start:22px;
}
.legacy__labels b{ display:block; font-family:var(--display); font-weight:700; font-size:22px; color:var(--teal-deep) }
.legacy__labels span{ display:block; margin-block-start:6px; font-size:15px; color:var(--text-soft); line-height:1.5 }

/* ==========================================================================
   7 · PRODUTOS
   ========================================================================== */
/* Montra, não fichas: cada cartão mostra a animação de topo daquele produto,
   em miniatura e na sua cor, com a assinatura do produto no lugar de um
   título repetido. As classes são as mesmas das páginas de produto — é
   literalmente o mesmo componente, montado pelo mesmo ficheiro. */
.cross{ display:grid; gap:16px }
.cross__card{
  position:relative; display:flex; flex-direction:column;
  border-radius:20px; border:1px solid var(--rule-dark);
  background:rgba(241,247,247,.04); overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s ease, background-color .3s ease;
}
.cross__card::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:3px; z-index:3;
  background:linear-gradient(90deg,var(--c),transparent);
}
.cross__card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--c) 55%,transparent); background:rgba(241,247,247,.07) }

/* O palco herda o fundo do hero de produto e recebe o acento do cartão, para
   que a miniatura seja realmente a arte daquele produto. */
.cross__art{
  --acc:var(--c); --acc-2:var(--c);
  position:relative; aspect-ratio:56/46; overflow:hidden;
  background:
    radial-gradient(78% 54% at 50% 110%, color-mix(in srgb,var(--c) 32%,transparent), transparent 72%),
    radial-gradient(130% 96% at 50% -10%, #05b0a8 0%, #037c7d 22%, #025159 46%, #0e3034 68%, #03070d 100%);
}
.cross__art svg{ position:absolute; inset:0; inline-size:100%; block-size:100% }
.cross__art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(3,7,13,.55) 100%);
}

.cross__body{ display:grid; gap:9px; padding:18px 18px 22px }
.cross__logo{ block-size:24px; inline-size:auto; display:none }
.cross__logo.is-on{ display:block }
.cross__logo.is-on ~ .cross__lockup{ display:none }
.cross__lockup{ display:flex; align-items:center; gap:8px }
.cross__lockup b{
  font-family:var(--display); font-weight:700; font-size:18.5px; letter-spacing:-.03em;
  color:#fff; line-height:1;
}
.cross__lockup i{ inline-size:1px; block-size:16px; background:rgba(241,247,247,.32) }
.cross__lockup img{ block-size:12px; inline-size:auto; opacity:.9 }
.cross__card em{ display:block; font-style:normal; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--c) }
.cross__card p{ font-size:14px; line-height:1.5; color:var(--on-dark-soft) }
.cross__go{ margin-block-start:2px; font-size:13.5px; font-weight:600; color:var(--c); display:inline-flex; align-items:center; gap:7px }
.cross__go svg{ inline-size:14px; block-size:14px; transition:transform .22s }
.cross__card:hover .cross__go svg{ transform:translateX(3px) }

/* Cinco, não quatro: a quebra de 3 para 5 salta a linha de 4, que deixaria um
   cartão sozinho na segunda fila. */
@media (min-width:640px){ .prods__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:900px){ .prods__grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:1240px){ .prods__grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px } }
.prods .actions.centred{ margin-block-start:34px }

/* ==========================================================================
   8 · COMO ATUAMOS
   ========================================================================== */
.flow__track{
  position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;
  padding-block-start:56px;
}
.flow__track::before{
  content:""; position:absolute; inset-block-start:26px; inset-inline:8%;
  block-size:2px; background:linear-gradient(90deg,var(--teal),rgba(2,115,115,.15));
  transform-origin:left; transform:scaleX(0); transition:transform 1.4s var(--ease);
}
.flow__track.is-in::before{ transform:scaleX(1) }
.flow__step{ position:relative; text-align:center; padding-inline:6px }
.flow__mark{
  position:absolute; inset-block-start:-56px; inset-inline-start:50%; translate:-50% 0;
  inline-size:54px; block-size:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); border:2px solid var(--teal); color:var(--teal);
  box-shadow:0 0 0 6px rgba(2,115,115,.08);
  opacity:0; transform:translate(-50%,10px) scale(.85);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:calc(.35s + var(--i) * .18s);
}
.flow__track.is-in .flow__mark{ opacity:1; transform:translate(-50%,0) scale(1) }
.flow__mark .ico{ inline-size:25px; block-size:25px }
.flow__n{ display:block; font-family:var(--display); font-weight:700; font-size:13px; color:var(--teal); letter-spacing:.1em }
.flow__step .h3{ margin-block-start:6px }
.flow__step p{ margin-block-start:8px; font-size:15px; line-height:1.5; color:var(--text-soft) }

/* ==========================================================================
   9 · ÁREAS
   ========================================================================== */
.areas__head{ max-inline-size:74ch }
/* Palco escuro dentro de uma secção clara: a secção mantém o lugar que tem no
   ritmo da página e a ilustração ganha o fundo onde o isométrico se lê. */
.areas__stage{
  margin-block-start:34px; border-radius:26px; overflow:hidden;
  padding:clamp(10px,2vw,24px);
  background:
    radial-gradient(72% 58% at 50% 88%, rgba(7,210,210,.16), transparent 68%),
    radial-gradient(120% 100% at 50% -20%, #06474c 0%, #04292e 34%, #051b20 62%, #03070d 100%);
  box-shadow:0 40px 90px -50px rgba(1,30,34,.9), inset 0 0 0 1px rgba(7,210,210,.14);
}
.areas__stage svg{ display:block; inline-size:100%; block-size:auto }

/* --- o edifício ---------------------------------------------------------- */
.ab-topo{ fill:url(#ab-topo); stroke:rgba(110,245,245,.72); stroke-width:1.1 }
.ab-dir{ fill:url(#ab-dir); stroke:rgba(7,210,210,.3); stroke-width:1 }
.ab-esq{ fill:url(#ab-esq); stroke:rgba(7,210,210,.22); stroke-width:1 }
.ab-plat{
  fill:rgba(7,210,210,.05); stroke:rgba(7,210,210,.34); stroke-width:1.2;
}
/* As janelas: o edifício não se mexe, mas está aceso. */
.ab-luz{ stroke:#6ef5f5; stroke-width:1.7; stroke-linecap:round; opacity:.4 }

/* --- os caminhos --------------------------------------------------------- */
.ab-via{ fill:none; stroke:var(--cor,#07d2d2); opacity:.3; stroke-width:1.3; stroke-linecap:round }
.ab-saida{ fill:var(--luz,#6ef5f5); opacity:.5 }
/* O pulso é o mesmo traçado, cortado num segmento curto que corre ao longo
   dele. Um ponto a seguir um caminho precisaria de `offset-path`, que ainda
   não é seguro em todo o lado; um tracejado que desliza é. */
.ab-pulso{
  fill:none; stroke:var(--luz,#6ef5f5); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:34 1400; stroke-dashoffset:34; opacity:0;
  filter:drop-shadow(0 0 6px currentColor); color:var(--luz,#6ef5f5);
}

/* --- os nós -------------------------------------------------------------- */
.ab-halo{ fill:var(--cor,#07d2d2); opacity:.12 }
.ab-disco{
  fill:var(--fundo,#062f34); stroke:var(--luz,#6ef5f5); stroke-width:1.5;
}
.ab-ico{ color:var(--luz,#9df6f6); overflow:visible }
/* Fonte de texto, não a display: em maiúsculas pequenas o G da MuseoModerno
   lê-se como Q — "MARKETINQ", "LOQÍSTICA". */
.ab-rot{
  fill:rgba(241,247,247,.82); font-family:var(--body); font-weight:600;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-anchor:middle;
}
.ab-no{ transition:opacity .5s ease }

/* --- o movimento --------------------------------------------------------- */
/* Tudo o que se move está aqui dentro: com movimento reduzido a cena fica
   completa e quieta, não vazia. */
@media (prefers-reduced-motion:no-preference){
  .is-in .ab-pulso{ animation:ab-correr 4.6s var(--d,0s) linear infinite }
  .is-in .ab-saida{ animation:ab-partir 4.6s var(--d,0s) ease-out infinite }
  .is-in .ab-halo{ animation:ab-halo 4.6s var(--d,0s) ease-in-out infinite }
  .ab-luz{ animation:ab-piscar 5.4s var(--d,0s) ease-in-out infinite }
}
/* AREAS-VIDA */
/* Metade dos caminhos corre para dentro: o traço parte do fim e vem até ao
   núcleo. É a mesma animação com o sinal trocado. */
.ab-pulso--volta{ stroke-dashoffset:-1400 }
@media (prefers-reduced-motion:no-preference){
  .is-in .ab-pulso--volta{ animation:ab-voltar 4.6s var(--d,0s) linear infinite }
}
@keyframes ab-voltar{
  0%{ stroke-dashoffset:-1400; opacity:0 }
  8%{ opacity:.95 }
  86%{ opacity:.95 }
  100%{ stroke-dashoffset:34; opacity:0 }
}
/* Cada área acende à vez. Dez luzes a piscar juntas leem-se como um erro;
   um foco que se desloca lê-se como a empresa a trabalhar. */
@media (prefers-reduced-motion:no-preference){
  .is-in .ab-no{ animation:ab-acende 9.2s var(--d,0s) ease-in-out infinite }
}
@keyframes ab-acende{
  0%,86%,100%{ filter:none }
  92%{ filter:drop-shadow(0 0 10px var(--cor)) brightness(1.22) }
}
/* AREAS-VIDA */
@keyframes ab-correr{
  0%{ stroke-dashoffset:34; opacity:0 }
  8%{ opacity:.95 }
  86%{ opacity:.95 }
  100%{ stroke-dashoffset:-1400; opacity:0 }
}
@keyframes ab-partir{ 0%{ opacity:.25; r:3.4 } 8%{ opacity:1; r:5.4 } 30%,100%{ opacity:.25; r:3.4 } }
@keyframes ab-halo{ 0%,64%{ opacity:.25 } 80%{ opacity:1 } 100%{ opacity:.25 } }
@keyframes ab-piscar{ 0%,100%{ opacity:.26 } 50%{ opacity:.78 } }

@media (max-width:900px){
  /* Em ecrã estreito a ilustração encolhe abaixo do legível; passa a rolar
     lateralmente em vez de desaparecer. */
  .areas__stage{ overflow-x:auto; padding-inline:0 }
  .areas__stage svg{ min-inline-size:760px }
  .ab-rot{ font-size:15px }
}

/* ==========================================================================
   10 · NÚMEROS
   ========================================================================== */
.figures__row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px }
.fig{ text-align:center; transition-delay:var(--d,0ms) }
.fig b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(46px,7.4vw,82px); line-height:.94; letter-spacing:-.04em; color:#fff;
}
.fig span{ display:block; margin-block-start:8px; font-size:15px; color:rgba(255,255,255,.82); line-height:1.35 }

/* ==========================================================================
   11 · CASES
   ========================================================================== */
.cases__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px }
.case{ grid-column:span 1; border-radius:18px; overflow:hidden; border:1px solid var(--rule); background:var(--paper);
  transition:transform .3s var(--ease), box-shadow .3s ease; transition-delay:var(--d,0ms) }
.case--lead{ grid-column:span 3; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) }
.case:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -40px rgba(1,30,34,.6) }
.case__art img{ inline-size:100%; block-size:100%; object-fit:cover }
.case__body{ padding:22px 24px 26px }
.case__kpis{ display:flex; gap:22px; margin-block-start:16px }
.case__kpis b{ display:block; font-family:var(--display); font-weight:700; font-size:26px; color:var(--teal-deep) }
.case__kpis span{ font-size:13px; color:var(--text-soft) }
.pending{
  grid-column:1 / -1; border:1px dashed color-mix(in srgb,var(--teal) 40%,transparent);
  border-radius:18px; padding:32px 34px; background:rgba(2,115,115,.035);
}
.pending p{ margin-block-start:10px; color:var(--text-soft); max-inline-size:76ch }
.pending code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; color:var(--teal) }

/* ==========================================================================
   12 · CLIENTES E PARCEIROS — one continuous rail
   ========================================================================== */
.marquee{
  margin-block-start:8px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; gap:18px; inline-size:max-content }
.marquee__track li{
  inline-size:196px; background:var(--paper); border:1px solid var(--rule); border-radius:14px;
  padding:16px; display:grid; justify-items:center; gap:10px;
  transition:transform .25s var(--ease), box-shadow .25s ease;
}
.marquee__track li:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -34px rgba(1,30,34,.6) }
.marquee__track img{ block-size:74px; inline-size:auto; object-fit:contain; mix-blend-mode:multiply }
.marquee__track span{ font-size:14px; font-weight:600; color:var(--text-soft) }
@media (prefers-reduced-motion:no-preference){
  .marquee__track{ animation:slide 34s linear infinite }
  .marquee:hover .marquee__track{ animation-play-state:paused }
}
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(calc(-100% / 3)) } }

/* ==========================================================================
   14 · CTA FINAL
   ========================================================================== */
.finale{ position:relative; overflow:hidden; padding-block:clamp(80px,11vw,132px); text-align:center }
.finale__in{ position:relative; z-index:3 }
.finale .h2{ margin-block-start:14px; max-inline-size:18ch; margin-inline:auto }
.finale .lede{ margin-block-start:16px; max-inline-size:52ch; margin-inline:auto }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ position:relative; padding-block:clamp(64px,8vw,92px) 30px }
/* Mais ar entre a marca e as colunas: com as bandeiras fora, a coluna da
   esquerda ficou curta e as duas metades desencostaram-se sozinhas. */
.foot__top{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,2fr);
  gap:clamp(32px,6vw,88px);
}
.foot__brand img{ inline-size:170px }
.foot__brand p{
  margin-block-start:12px; font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--on-dark-soft);
}
.foot__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,3vw,40px) }
.foot__cols h3{
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan); margin-block-end:16px;
}
.foot__cols a{
  position:relative; display:block; padding-block:7px; font-size:14.5px;
  color:var(--on-dark-soft); transition:color .2s ease, transform .2s var(--ease);
}
.foot__cols a:hover{ color:#fff; transform:translateX(2px) }

.foot__bottom{
  margin-block-start:clamp(44px,6vw,64px); padding-block-start:24px;
  border-block-start:1px solid var(--rule-dark);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
/* Os ícones são glifos de linha, não logótipos: cinco marcas coloridas no
   último bloco da página competiam com a da Vazto. */
.foot__social{ display:flex; gap:6px }
.foot__social a{
  display:grid; place-items:center; inline-size:38px; block-size:38px; border-radius:11px;
  color:var(--on-dark-soft);
  transition:color .22s ease, background-color .22s ease, transform .22s var(--ease);
}
.foot__social svg{ inline-size:17px; block-size:17px }
.foot__social a:hover{ color:var(--ink); background:var(--cyan); transform:translateY(-2px) }
.foot__legal{ font-size:13px; color:rgba(241,247,247,.46) }

/* ==========================================================================
   RESPONSIVE — the composition reorganises, it does not merely shrink
   ========================================================================== */
@media (max-width:1080px){
  .mast__nav{ gap:18px; font-size:13.5px }
  .mast__cta{ display:none }
  .what__rail{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}

@media (max-width:860px){
  :root{ --block:58px }
  .mast__nav{ display:none }
  .burger{ display:grid }
  .about__grid,.merge__stage{ grid-template-columns:minmax(0,1fr) }
  .merge__svg{ display:none }             /* the curves need the two columns */
  .merge__out{ justify-self:stretch; max-inline-size:none; padding:22px; border-radius:16px;
               border:1px solid rgba(7,210,210,.34); background:rgba(7,210,210,.07) }
  .about__facts{ margin-block-start:18px; margin-inline:0 }
  .fut__rail{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding-block-end:8px }
  .fut__rail::before,.fut__rail::after{ display:none }
  .fut__card{ grid-template-columns:minmax(0,1fr); gap:16px; padding:22px }
  .legacy__labels{ grid-template-columns:minmax(0,1fr); gap:18px }
  .flow__track{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px 18px; padding-block-start:56px }
  .flow__track::before{ display:none }
  .figures__row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 20px }
  .cases__grid{ grid-template-columns:minmax(0,1fr) }
  .case--lead{ grid-column:span 1; grid-template-columns:minmax(0,1fr) }
  .foot__top{ grid-template-columns:minmax(0,1fr) }
  .foot__cols{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width:660px){
  .hero{ min-block-size:auto; padding-block:calc(var(--mast) + 26px) 96px }
  .hero__copy{ max-inline-size:none }
  /* Seven items in a two-column rail leave an orphan cell; the last one takes
     the whole row instead of the grid showing a hole. */
  .what__rail{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .what__rail li:last-child{ grid-column:1 / -1 }
  .flow__track{ grid-template-columns:minmax(0,1fr); gap:52px }
  .figures__row{ grid-template-columns:minmax(0,1fr); gap:28px }
  .foot__cols{ grid-template-columns:minmax(0,1fr) }
  .marquee__track li{ inline-size:160px }
  .marquee__track img{ block-size:58px }
}

/* PAGINA-PRODUTOS */
/* ==========================================================================
   PÁGINA DE PRODUTOS
   ========================================================================== */
/* A abertura é uma faixa, não um hero: a página existe para levar alguém aos
   cinco produtos, e meio ecrã de banner antes disso trabalha contra ela. */
.pgprod__topo{
  position:relative; overflow:hidden; isolation:isolate;
  /* O contrato partilhado das páginas institucionais — os tokens `--hero-*`
     de vazto.css. Esta abertura media 407px contra os 652 do Método: era a
     mais curta das três, e o pé tinha 34px contra os 124 dele. */
  padding-block:var(--hero-pad-topo) var(--hero-pad-pe);
  min-block-size:var(--hero-min);
  display:grid; align-content:center;
}
.pgprod__in{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(18px,2.4vw,26px);
}
/* As medidas de linha ficam presas ao texto e não à coluna: centrado, é o
   comprimento da linha que decide se a leitura é confortável, e uma linha de
   64ch ao centro faz o olho voltar sempre a um sítio diferente. */
.pgprod__copy{ min-inline-size:0; max-inline-size:54ch; margin-inline:auto }
/* Ao centro o kicker subiu para onde o degradê da abertura está mais claro, e
   o ciano da marca deixou de chegar aos 4.5:1 — media 3.96:1. O tom claro da
   mesma cor é o que as secções escuras do site já usam. */
.pgprod__in .kicker{ display:block; color:var(--cyan-lit,#6ef5f5) }
/* A escala do título vem do token partilhado. Uma versão desta alteração
   acrescentou `.pgprod__topo .h1` mais acima no ficheiro; tinha a mesma
   especificidade que esta e perdia por vir antes — que é a armadilha que já
   custou três blocos mortos ao metodo.css. O token entra AQUI, na regra que
   já existia. */
.pgprod__in .h1{ margin-block-start:8px; font-size:var(--hero-h1); line-height:1.1 }
.pgprod__in .lede{
  margin-block:10px 0; margin-inline:auto; max-inline-size:48ch; font-size:15.5px;
}
.pgprod__in .actions{ margin-block-start:0; justify-content:center; flex-wrap:wrap }

/* --------------------------------------------------------------------------
   Os cinco palcos

   Cada produto tem o seu: a animação oficial de um lado, o texto do outro. Os
   cinco estão na página ao mesmo tempo, e o que os impede de voltarem a ser
   cinco caixas iguais é o lado alternar — arte à esquerda, depois à direita,
   depois à esquerda. A composição mantém-se e o olho deixa de encontrar a
   mesma fotografia cinco vezes.

   A secção é clara e os palcos são escuros. As cenas foram desenhadas sobre
   fundo escuro — é dele que vem a profundidade — e uma página inteira escura
   tirava à página de Produtos o ritmo que o resto do site tem.
   -------------------------------------------------------------------------- */
.pgprod__lista{ padding-block:clamp(34px,5vw,58px) }

.palco{ display:grid; gap:clamp(18px,2.4vw,28px) }

.palco__pan{
  position:relative; display:grid; overflow:hidden; border-radius:24px;
  border:1px solid var(--rule-dark);
  box-shadow:0 40px 90px -60px rgba(1,22,26,.7);
  background:
    radial-gradient(96% 118% at 72% 8%, color-mix(in srgb,var(--c) 22%,transparent), transparent 62%),
    linear-gradient(168deg, #05171b 0%, #061f24 54%, #04141a 100%);
}

/* Um risco da cor no cimo, como as páginas de produto têm. */
.palco__pan::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:3px; z-index:4;
  background:linear-gradient(90deg,var(--cl),var(--c) 58%,transparent);
}

/* A cena herda o acento do produto: é ela que faz o palco ser aquele produto
   e não uma ilustração genérica da marca. */
.palco__cena{
  --acc:var(--c); --acc-2:var(--c);
  position:relative; display:block; aspect-ratio:56/36; overflow:hidden;
}
.palco__cena svg{ position:absolute; inset:0; inline-size:100%; block-size:100% }

.palco__info{
  position:relative; z-index:3;
  padding:clamp(20px,3vw,32px) clamp(20px,3.4vw,38px) clamp(24px,3.4vw,36px);
  display:grid; justify-items:start; align-content:center;
}

.palco__logo{ block-size:30px; inline-size:auto; display:none }
.palco__logo.is-on{ display:block }
.palco__logo.is-on ~ .palco__lockup{ display:none }
.palco__lockup{ display:flex; align-items:center; gap:10px }
.palco__lockup b{
  font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.03em;
  color:#fff; line-height:1;
}
.palco__lockup i{ inline-size:1px; block-size:20px; background:rgba(241,247,247,.32) }
.palco__lockup img{ block-size:16px; inline-size:auto; opacity:.9 }

.palco__pos{
  margin-block-start:11px; font-size:12px; font-weight:600; letter-spacing:.085em;
  text-transform:uppercase; color:var(--cl);
}
/* A pergunta que traz o visitante vem antes do que a Vazto faz. */
.palco__q{
  margin-block-start:11px; font-family:var(--display); font-weight:700;
  font-size:clamp(19px,2.7vw,25px); letter-spacing:-.024em; line-height:1.22;
  color:#fff; max-inline-size:34ch;
}
.palco__d{
  margin-block-start:9px; font-size:15px; line-height:1.58;
  color:var(--on-dark-soft); max-inline-size:60ch;
}
.palco__cta{
  margin-block-start:18px; display:inline-flex; align-items:center; gap:9px;
  padding:11px 19px; border-radius:999px;
  font-size:14.5px; font-weight:600; color:#03121a;
  background:var(--cl);
  transition:transform .22s var(--ease), box-shadow .22s ease;
}
.palco__cta svg{ inline-size:15px; block-size:15px; transition:transform .22s }
.palco__cta:hover{ box-shadow:0 12px 30px -14px color-mix(in srgb,var(--c) 80%,transparent) }
.palco__cta:hover svg{ transform:translateX(3px) }

@media (min-width:900px){
  .palco__pan{ grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); align-items:stretch }
  .palco__cena{ aspect-ratio:auto; block-size:100%; min-block-size:376px }

  /* Os pares trocam de lado. `order` e não uma segunda regra de colunas: a
     grelha continua a ser a mesma, muda só quem ocupa cada célula — e o HTML
     mantém a arte antes do texto, que é a ordem em que se lê no telemóvel. */
  .palco__pan--troca .palco__cena{ order:2 }
  .palco__pan--troca{
    background:
      radial-gradient(96% 118% at 28% 8%, color-mix(in srgb,var(--c) 22%,transparent), transparent 62%),
      linear-gradient(192deg, #05171b 0%, #061f24 54%, #04141a 100%);
  }
}

@media (max-width:899px){
  /* Em coluna a arte fica em cima: é a imagem que identifica o produto antes
     de o nome ser lido. Altura contida — com a proporção 56/36 à largura de um
     tablet a arte sozinha passava dos 500px. */
  .palco__cena{ aspect-ratio:auto; block-size:clamp(190px,40vw,300px) }
  .palco__info{ align-content:start }
}

/* O ícone do WhatsApp no botão de contorno, como nas páginas de produto. */
.ico-wa{ inline-size:17px !important; block-size:17px !important; fill:currentColor; stroke:none }
.btn-ghost:hover .ico-wa,.btn:hover .ico-wa{ transform:none }
/* PAGINA-PRODUTOS */

/* CONTRASTE-MENU */
/* A barra é fixa e atravessa fundos de todas as luminâncias. Sobre o teal
   claro do topo, nem o branco puro chega aos 4.5:1 — 4.4:1. Uma sombra
   descendente por trás dela resolve sem se ver: escurece o suficiente para
   o texto ganhar contraste e some antes de tocar no conteúdo. */
.mast::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; z-index:-1;
  block-size:calc(var(--mast) + 26px); pointer-events:none;
  background:linear-gradient(180deg,rgba(3,7,13,.58),rgba(3,7,13,.28) 55%,transparent);
  transition:opacity .3s ease;
}
.mast.is-stuck::before{ opacity:0 }
/* CONTRASTE-MENU */