/* =============================================================
   MEDION — site institucional
   Todo valor visual vive em tokens no :root.
   ============================================================= */

:root {
  /* ---------- COR — paleta "Precision Blueprint" ----------
     A mesma do sistema (MediObra/app/assets/stylesheets/application_custom.css):
     teal como primário de engenharia, escala navy/slate como neutros.

     Paleta anterior (marca), para voltar:
       --paper #F2F2F5 · --paper-2 #E7E8EF · --ink #1A1D28 · --ink-2 #4B5268
       --ink-3 #5F6A8C · --navy #1f2c64 · --navy-lift #2C3D8F
       --navy-wash #EAECF5 · --dark #131730 · --line #DCDEE7 · --line-2 #C0C4D3
       --ink-inv #EFF1F8 · nav rgba(234,236,245,.78) · soft-inv rgba(239,241,248,.42) */

  --paper:      #F8FAFC;   /* navy-50                     */
  --paper-2:    #E2E8F0;   /* navy-200                    */
  --white:      #FFFFFF;

  --ink:        #0F172A;   /* navy-900                    */
  --ink-2:      #475569;   /* navy-600                    */
  --ink-3:      #64748B;   /* navy-500                    */

  --navy:       #0E7490;   /* teal-700 — acento primário  */
  --navy-lift:  #0891B2;   /* teal-600 — hover            */
  --navy-wash:  #F8FAFC;   /* navy-50 — = --content-bg do sistema */
  --dark:       #0F172A;   /* navy-900 — faixa escura     */

  --line:       #E2E8F0;   /* navy-200                    */

  /* fundo da barra fixa e do menu mobile — o mesmo nos dois, para não
     divergirem: o menu é a continuação da barra. */
  --nav-bg:     rgba(248, 250, 252, .78);
  --nav-blur:   blur(14px);
  --line-2:     #CBD5E1;   /* navy-300                    */
  --line-inv:   rgba(241, 245, 249, .18);
  --ink-inv:    #F1F5F9;   /* navy-100                    */
  --ink-inv-2:  rgba(241, 245, 249, .62);

  /* ---------- TIPOGRAFIA ---------- */
  --f-display: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-ui:      "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-mono:    11px;
  --t-sm:      14px;
  --t-md:      16px;
  --t-lg:      19px;
  --t-h3:      clamp(19px, 2.1vw, 23px);
  --t-h2:      clamp(34px, 5.2vw, 62px);
  /* teto 90px: "Gerenciar mostra o caminho." mede 1239,6px a 100px em
     Rubik, e a caixa de conteúdo tem 1144px. O termo em vw segue a mesma
     conta (caixa ≈ 0,92 × viewport), então a linha só quebra abaixo de
     ~490px, onde quebrar é o certo. */
  --t-h1:      clamp(36px, 6.4vw, 80px);

  --lh-tight:  .96;
  --lh-snug:   1.16;
  --lh-body:   1.6;
  --tr-mono:   .12em;
  --tr-tight:  -.035em;

  /* ---------- ESPAÇO ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-28: 112px;
  --s-36: 144px;

  /* ---------- FORMA ---------- */
  --r-pill: 999px;
  --r-card: 18px;
  --r-box:  26px;

  /* ---------- GRID ---------- */
  --wrap:   1240px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ---------- MOVIMENTO ---------- */
  --e:      cubic-bezier(.22, .61, .36, 1);
  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast: .22s;
  --t-med:  .45s;
  --t-slow: .9s;
}

/* =============================================================
   BASE
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* o nav é sticky (~79px): sem isso o topo da section para atrás dele */
:target,
section[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: var(--tr-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

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

::selection { background: var(--navy); color: var(--paper); }

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

/* =============================================================
   ÁTOMOS
   ============================================================= */

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--s-5);
}

.eyebrow-inv { color: var(--ink-inv-2); }

.soft     { color: var(--ink-3); }
.lead     { color: var(--navy); }
.soft-inv { color: rgba(241, 245, 249, .42); }

/* pílulas — contorno fino, o gesto do layout */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 11px var(--s-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  line-height: 1;
  color: var(--ink);
  background: transparent;
  transition: border-color var(--t-fast) var(--e),
              background   var(--t-fast) var(--e),
              color        var(--t-fast) var(--e);
}

/* :not(.pill-solid) é o que impede esta regra de pintar o texto dos botões
   sólidos de azul no hover — ela vencia por especificidade (0,2,1). */
a.pill:not(.pill-solid):hover { border-color: var(--navy); color: var(--navy); }

/* sólido: branco puro nos dois estados, como o .btn-primary do sistema */
.pill-solid {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.pill-solid:hover {
  background: var(--navy-lift);
  border-color: var(--navy-lift);
  color: var(--white);
}

.pill-lg { padding: 17px var(--s-8); font-size: var(--t-md); }

.pill svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-fast) var(--e);
}

.pill:hover svg { transform: translate(2px, -2px); }

/* =============================================================
   NAV
   ============================================================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--e);
}

/* O fundo da barra vive num pseudo-elemento, não no .nav. Um elemento com
   backdrop-filter vira backdrop root dos descendentes: com o filtro no
   .nav, o menu (que é filho) só teria para borrar o que foi pintado dentro
   da barra, não a página atrás — e no mobile o hero atravessava o menu.
   Assim barra e menu ficam lado a lado diante da página e borram o mesmo. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nav-bg);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
}

.nav.is-stuck { border-bottom-color: var(--line); }

.nav-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--s-5) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.nav-logo { display: inline-flex; align-items: center; color: var(--ink, #16151a); }
.nav-logo img { width: 132px; height: auto; }
.nav-logo-svg { height: 34px; width: auto; display: block; }

@media (max-width: 640px) {
  .nav-logo-svg { height: 28px; }
}

.nav-links {
  display: flex;
  gap: var(--s-8);
  margin-inline: auto;
  font-size: var(--t-sm);
}

.nav-links a {
  position: relative;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--e);
}

.nav-links a:hover { color: var(--ink); }

.nav-badge {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: 5px;
  vertical-align: 2px;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: var(--ink-inv);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0;
}

.nav-login {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-right: calc(var(--s-8) * -1 + var(--s-5));
  padding: 11px 0;
  font-size: var(--t-sm);
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color var(--t-fast) var(--e);
}

.nav-login:hover { color: var(--ink); }

.nav-login svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-fast) var(--e);
}

.nav-login:hover svg { transform: translateX(2px); }

.nav-burger {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  width: 15px;
  height: 1.5px;
  margin: 3px auto;
  background: var(--ink);
  transition: transform var(--t-fast) var(--e), opacity var(--t-fast) var(--e);
}

.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

/* =============================================================
   HERO
   ============================================================= */

.hero {
  position: relative;
  display: grid;
  align-content: center;
  background: var(--navy-wash);
  /* tela cheia menos a nav, que é sticky e ocupa fluxo. --nav-h é medida em
     tempo real no main.js; o fallback vale só para o primeiro quadro.
     svh em vez de vh: no mobile a barra do navegador não estoura a seção. */
  min-height: calc(100vh - var(--nav-h, 76px));
  min-height: calc(100svh - var(--nav-h, 76px));
  padding-block: clamp(var(--s-12), 6vw, var(--s-20));
  overflow: hidden;
}

/* ---------- arte do hero ----------
   Planta de trecho medido: curvas de nível, traçado, estacas, linha de
   cota e carimbo. Vetorial e tingida pelos tokens — nada de bitmap. */

.hero-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(260px, 32vw, 470px);
  height: auto;
  opacity: .8;
  color: var(--navy);
  pointer-events: none;
}

.art-contours {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1;
  opacity: .16;
}

.art-road-band {
  stroke: var(--navy);
  stroke-width: 13;
  stroke-linecap: round;
  opacity: .13;
}

.art-road-axis {
  stroke: var(--navy);
  stroke-width: 1.25;
  stroke-dasharray: 9 7;
  opacity: .55;
}

.art-tick line {
  stroke: var(--navy);
  stroke-width: 1.25;
  opacity: .7;
}

.art-hatch {
  fill: url(#mo-hatch);
  stroke: var(--navy);
  stroke-width: .75;
  opacity: .3;
}

.art-dim line { stroke: var(--navy); stroke-width: 1; opacity: .75; }
.art-dim .art-ext { opacity: .28; stroke-dasharray: 3 4; }
.art-arrow { fill: var(--navy); opacity: .75; }

.art-stamp {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1;
  opacity: .38;
}

.art-label {
  fill: var(--navy);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--tr-mono);
  opacity: .62;
}

.art-label-key { font-weight: 500; opacity: .92; }
.art-label-faint { opacity: .3; }

.hero h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  margin-bottom: clamp(var(--s-8), 3.4vw, var(--s-12));
}

/* mesma família do rótulo "PLATAFORMA"; caixa alta e tracking largo do
   rótulo não sobrevivem a uma frase inteira, então só a fonte é herdada. */
.hero-lede {
  max-width: 56ch;
  font-family: var(--f-mono);
  font-size: var(--t-md);
  line-height: 1.66;
  color: var(--ink-2);
}

/* =============================================================
   GRADE DE CARDS
   ============================================================= */

.sec-cards {
  background: var(--navy-wash);
  padding-top: clamp(var(--s-10), 5vw, var(--s-16));
  padding-bottom: clamp(var(--s-16), 9vw, var(--s-28));
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--s-3), 1.4vw, var(--s-5));
}

.card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--paper-2);
  isolation: isolate;
}

.card-wide { grid-column: span 2; aspect-ratio: 8 / 5; }

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--e-out);
}

.card::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(15, 16, 20, .74));
  pointer-events: none;
}

.card:hover img { transform: scale(1.04); }

.card-tags {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 2;
  display: flex;
  gap: 6px;
}

.tag {
  padding: 6px var(--s-3);
  border: 1px solid rgba(244, 244, 243, .38);
  border-radius: var(--r-pill);
  background: rgba(20, 22, 26, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink-inv);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: 1;
}

.tag-live { background: rgba(31, 44, 100, .72); border-color: transparent; }

.card-title {
  position: absolute;
  z-index: 2;
  left: var(--s-6);
  right: var(--s-8);
  bottom: var(--s-6);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--ink-inv);
}

/* =============================================================
   SEÇÕES
   ============================================================= */

.sec { padding-block: clamp(var(--s-16), 9vw, var(--s-28)); }

.sec-head { margin-bottom: clamp(var(--s-10), 5vw, var(--s-16)); }

.sec-head h2,
.sec-cta h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
}

/* ---------- declaração em foto cheia ----------
   Sangra na largura toda; o texto vive sobre um escurecimento à esquerda,
   forte o bastante para o branco ler sobre qualquer foto que entre aqui. */

.statement {
  position: relative;
  display: grid;
  min-height: clamp(520px, 82vh, 840px);
  overflow: hidden;
  isolation: isolate;
}

.statement-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(15, 23, 42, .88) 0%, rgba(15, 23, 42, .62) 40%,
                            rgba(15, 23, 42, .20) 70%, rgba(15, 23, 42, .08) 100%),
    linear-gradient(to bottom, rgba(15, 23, 42, .28), transparent 34%);
}

.statement-inner {
  display: grid;
  align-content: space-between;
  gap: var(--s-12);
  padding-block: clamp(var(--s-12), 7vw, var(--s-28));
  color: var(--ink-inv);
}

.statement-inner h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
}

/* parágrafo de apoio sobre fundo escuro — mesmo desenho do .cta-text,
   com o tom invertido, que no claro seria ilegível e vice-versa. */
.statement-text,
.anny-text {
  max-width: 46ch;
  margin-top: var(--s-6);
  color: var(--ink-inv-2);
}

/* rótulo mono da referência, na forma de pílula do site */
.statement-cta {
  justify-self: start;
  padding: 15px var(--s-6);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: 1;
  transition: background var(--t-fast) var(--e), color var(--t-fast) var(--e);
}

.statement-cta:hover { background: var(--navy); color: var(--ink-inv); }

/* Estilos do fluxo de status (.sec-flow / .flow) removidos junto com a seção.
   O conteúdo — Em andamento › Análise do fiscal › Revisão › Fechado — não
   está em lugar nenhum da página agora. */

/* ---------- módulos ----------
   Grade sangrada: as fotos vão de borda a borda da janela, sem gutter.
   Só o cabeçalho da seção fica dentro do .wrap. Título e legenda de cada
   card alinham rente à borda da própria foto, como na referência. */

.mods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--s-6) var(--s-4);
  width: 100%;
}

.mod { display: grid; grid-template-rows: auto auto 1fr; }

/* títulos de 1 e de 2 linhas desalinhavam as fotos entre as colunas.
   O subgrid faz título, foto e descrição compartilharem as mesmas
   faixas da grade externa, alinhando as três em qualquer largura. */
@supports (grid-template-rows: subgrid) {
  .mods { grid-auto-rows: auto auto 1fr; }
  .mod  { grid-row: span 3; grid-template-rows: subgrid; }
}

.mod-tag,
.mod-desc { padding-inline: 0; }

.mod-tag {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  justify-content: center;
  margin-bottom: var(--s-4);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  text-align: center;
  transition: color var(--t-fast) var(--e);
}

.mod-n {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  color: var(--navy);
}

.mod-shot {
  margin: 0;              /* figure traz margin-inline: 40px do agente */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.mod-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow) var(--e-out);
}

/* ---------- pranchas técnicas dos módulos ----------
   Mesmo vocabulário do desenho do hero (cota, hachura, carimbo, rótulo
   em mono): cada módulo é desenhado, não fotografado. */

.plate {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--white);
}

.pl-frame,
.pl-rule,
.pl-soft,
.pl-faint,
.pl-hatch,
.pl-node,
.pl-node-new,
.pl-cloud,
.pl-dash,
.pl-dim line { fill: none; stroke: var(--navy); }

.pl-frame    { stroke-width: 1;   opacity: .18; }
.pl-rule     { stroke-width: 1.6; opacity: .8;  }
.pl-soft     { stroke-width: 1.4; opacity: .38; }
.pl-faint    { stroke-width: 1.2; opacity: .18; }
.pl-hatch    { stroke-width: 1;   opacity: .26; }
.pl-node     { stroke-width: 1.6; opacity: .8;  }
.pl-cloud    { stroke-width: 1.4; opacity: .5;  }
.pl-dash     { stroke-width: 1.6; opacity: .8;  stroke-dasharray: 7 5; }
.pl-node-new { stroke-width: 1.6; opacity: .9;  stroke-dasharray: 3 2.6; }

.pl-dim line   { stroke-width: 1; opacity: .7; }
.pl-dim .pl-ext{ opacity: .3; stroke-dasharray: 3 4; }
.pl-arrow      { fill: var(--navy); opacity: .75; }
.pl-fill       { fill: var(--navy); opacity: .82; stroke: none; }
.pl-fill-soft  { fill: var(--navy); opacity: .1;  stroke: none; }

.pl-mono {
  fill: var(--navy);
  font-family: var(--f-mono);
  font-size: 15px;
  letter-spacing: var(--tr-mono);
}

.pl-key     { opacity: .95; font-weight: 500; }
.pl-dim-t   { opacity: .58; }
.pl-faint-t { opacity: .34; }

/* a prancha é clara: o gradiente escuro e os rótulos brancos das fotos
   não valem aqui, então os rótulos viram texto de desenho. */
.mod-shot--plate::after { display: none; }

.mod-shot--plate .mod-keys {
  color: var(--navy);
  opacity: .62;
  /* o quadro da prancha tem recuo de 9/400 = 2,25% da largura. Ancorar os
     rótulos em px deixava-os para fora do quadro quando a IBM Plex Mono
     carregava (mais larga que a mono de sistema); em % o recuo acompanha
     a prancha, e o max-width impede o texto de invadir o desenho. */
  top: 5.5%;
  right: 5.5%;
  max-width: 52%;
  overflow-wrap: anywhere;
}

.mod:hover .plate { background: var(--navy-wash); }
.plate { transition: background var(--t-med) var(--e); }

/* a prancha mantém 4/3 em qualquer largura: o viewBox é 400x300 e, numa
   caixa 3/2, o SVG encolheria o desenho para caber na altura e o centraria,
   deixando o quadro mais estreito que o elemento — e os rótulos, ancorados
   na borda do elemento, caíam fora do quadro. */
@media (max-width: 720px) {
  .mod-shot--plate .mod-keys { font-size: 10px; letter-spacing: .08em; }
}

/* Abaixo de 516px a grade tem uma coluna só (2 colunas pedem 250+16+250),
   então não há nada a alinhar entre colunas e o subgrid sai. Ele fazia o
   row-gap do container valer também entre título, prancha e descrição,
   somando 24px à margem e afastando o título da imagem. Sem ele, o espaço
   interno é só a margem, e o gap passa a separar um módulo do outro. */
@media (max-width: 515px) {
  .mods { grid-auto-rows: auto; row-gap: var(--s-20); }
  .mod  { grid-row: auto; grid-template-rows: auto auto 1fr; }
  .mod-tag { margin-bottom: var(--s-3); }
}

/* escurecimento no topo, para os rótulos brancos lerem sobre qualquer foto */
.mod-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 23, 42, .45), transparent 38%);
  pointer-events: none;
}

.mod-keys {
  position: absolute;
  z-index: 1;
  top: var(--s-5);
  right: var(--s-5);
  text-align: right;
  color: var(--ink-inv);
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  line-height: 1.7;
}

.mod-desc {
  margin-top: var(--s-4);
  margin-inline: auto;   /* o max-width abaixo tira a largura total: sem isso
                            "centrado" só centraria o texto na caixa da esquerda */
  color: var(--ink-2);
  max-width: 42ch;
  text-align: center;
}

.mod:hover .mod-shot img { transform: scale(1.04); }
.mod:hover .mod-tag { color: var(--navy); }

@media (max-width: 720px) {
  .mod-shot img { aspect-ratio: 3 / 2; }
}

/* ---------- fluxo da medição ----------
   Timeline horizontal: os pontos ficam sobre uma linha contínua. A linha é
   desenhada em cada .step-mark, então column-gap fica em 0 e o respiro entre
   colunas vem do padding do conteúdo — é o que mantém a linha sem emendas. */

.sec-flow {
  border-top: 1px solid var(--line);   /* divisa entre módulos e fluxo */
  background: var(--navy-wash);
  padding-block: clamp(var(--s-12), 6vw, var(--s-20));
}

.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 0;
}

.step {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
}

.step-head,
.step p { padding-inline-end: var(--s-8); }

.step-n {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  color: var(--ink-3);
}

.step h3 {
  margin-top: var(--s-3);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
}

/* faixa da linha: 1px no centro vertical, cortada pela metade nas pontas */
.step-mark {
  position: relative;
  block-size: var(--s-12);
  margin-block: var(--s-2);
}

.step-mark::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  block-size: 1px;
  background: var(--line-2);
}

.step:first-child .step-mark::before { inset-inline-start: 50%; }
.step:last-child  .step-mark::before { inset-inline-end: 50%; }

.step-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  inline-size: 11px;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: var(--navy);
  transition: scale var(--t-fast) var(--e);
}

.step:hover .step-dot { scale: 1.45; }

.step p { color: var(--ink-2); }

/* Abaixo de 860px a timeline vira vertical: a linha passa a correr pela
   esquerda e cada etapa ocupa uma linha própria. */
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; }

  .step {
    grid-template-rows: none;
    grid-row: auto;
    grid-template-columns: 28px 1fr;
    column-gap: var(--s-4);
  }

  .step-head, .step p { grid-column: 2; padding-inline-end: 0; }

  .step-mark {
    grid-column: 1;
    grid-row: 1 / -1;
    block-size: auto;
    margin-block: 0;
  }

  .step-mark::before {
    inset-inline: auto;
    left: 50%;
    top: 0;
    bottom: 0;
    block-size: auto;
    inline-size: 1px;
  }

  .step:first-child .step-mark::before { top: 14px; }
  .step:last-child  .step-mark::before { bottom: calc(100% - 14px); }

  .step-dot { top: 14px; }

  .step + .step { margin-top: var(--s-8); }
}

/* ---------- anny ---------- */

.sec-anny {
  background: var(--dark);
  color: var(--ink-inv);
  padding-block: clamp(var(--s-16), 9vw, var(--s-28));
}

.anny-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(var(--s-10), 5vw, var(--s-16));
  align-items: center;
}

.anny-h {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
}

.anny-ask { display: grid; gap: var(--s-3); }

.ask {
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line-inv);
  border-radius: var(--r-card);
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--ink-inv-2);
  transition: background   var(--t-fast) var(--e),
              border-color var(--t-fast) var(--e),
              color        var(--t-fast) var(--e);
}

/* todos em contorno; o preenchimento percorre a lista conforme a seção
   sobe na tela. Quem marca .is-on é o main.js — não há hover aqui. */
.anny-ask .ask.is-on {
  border-color: transparent;
  background: var(--navy-lift);
  color: var(--ink-inv);
}

/* ---------- cta ---------- */

.cta-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-10);
  align-items: end;
}

.cta-text {
  max-width: 44ch;
  margin-top: var(--s-6);
  color: var(--ink-2);
}

/* a coluna se dimensiona pelo botão, o item mais largo; centralizar cada
   item nela alinha e-mail e nota pelo eixo da pílula. */
.cta-side {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
}

/* caminho secundário: quem não quer agendar ainda escreve direto */
.cta-mail {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--e), border-color var(--t-fast) var(--e);
}

.cta-mail:hover { color: var(--navy); border-color: var(--navy); }

.cta-note {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* =============================================================
   FOOTER
   ============================================================= */

.footer { border-top: 1px solid var(--line); padding-block: var(--s-10); }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6) var(--s-10);
}

.footer-logo { width: 116px; height: auto; opacity: .8; color: var(--ink); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin-inline: auto;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.footer-links a:hover { color: var(--ink); }

.footer-note {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  color: var(--ink-3);
}

/* =============================================================
   MOVIMENTO — entrada
   ============================================================= */

.rise {
  opacity: 0;
  transform: translateY(18px);
  animation: rise var(--t-slow) var(--e-out) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--e-out) var(--d, 0ms),
              transform var(--t-slow) var(--e-out) var(--d, 0ms);
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .rise, .reveal { opacity: 1; transform: none; }
}

/* =============================================================
   RESPONSIVO
   ============================================================= */

@media (max-width: 960px) {
  /* empacotamento denso: com 5 cards e um deles ocupando 2 colunas,
     o fluxo normal deixaria uma célula vazia no meio da grade. */
  .cards { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
  .card-wide { grid-column: span 2; }

  .flow { grid-template-columns: repeat(2, 1fr); }

  .anny-inner { grid-template-columns: 1fr; align-items: start; }

  .row { grid-template-columns: 44px 1fr; }
  .row p { grid-column: 2; }
}

@media (max-width: 780px) {
  .nav-burger { display: block; margin-left: var(--s-5); }
  .nav-cta { display: none; }
  .nav-login { margin-right: 0; margin-left: auto; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0 var(--gutter);
    background: var(--nav-bg);
    backdrop-filter: var(--nav-blur);
    -webkit-backdrop-filter: var(--nav-blur);
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-med) var(--e);
  }

  .nav-links.is-open { max-height: 320px; }

  /* sem backdrop-filter o fundo a 78% deixa o hero atravessar o menu
     aberto, que cobre meia tela. Aí ele fica praticamente opaco. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-links { background: rgba(248, 250, 252, .97); }
  }

  .nav-links a {
    padding-block: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: var(--t-md);
  }

  /* no mobile a arte fica na faixa livre abaixo do texto, que agora existe
     porque o hero ocupa a altura da tela. Mais larga e mais discreta. */
  .hero-art {
    width: min(78vw, 380px);
    opacity: .55;
  }

  .cards { grid-template-columns: 1fr; }
  .card, .card-wide { aspect-ratio: 4 / 3; grid-column: auto; }

  .facts { grid-template-columns: 1fr; gap: var(--s-6); }
  .fact dd { font-size: clamp(48px, 16vw, 76px); }

  .cta-box { grid-template-columns: 1fr; }

  .cta-side { justify-items: start; }

  .footer-links { margin-inline: 0; width: 100%; }
}

@media (max-width: 520px) {
  .flow { grid-template-columns: 1fr; }
  .flow li + li { padding-left: 0; }
}