/* ============================================================
   Workshop Hanur + Somada Travel: estilos
   Premissa: "Rota". Mapa noturno, laranja como a rota, azul como oceano.
   Para mudar as cores do site, altere só os tokens abaixo.
   ============================================================ */

:root{
  /* Paleta (seção 2 do pacote de design) */
  --canvas:#F7F4ED;        /* fundo da página, off-white aquecido; nunca branco puro */
  --canvas-deep:#0F2742;   /* fundo do hero e das seções escuras: "oceano noturno" */
  --panel:#FCFBF7;         /* cartões sobre o fundo claro */
  --panel-deep:#163A62;    /* cartões sobre o fundo escuro */
  --accent:#E97827;        /* laranja Hanur: botões, rota, ênfase rara */
  --accent-hover:#F08A3E;
  --accent-muted:rgba(233,120,39,.28);
  --blue:#174B78;          /* azul Somada: títulos sobre claro, detalhes */
  --blue-soft:#DCE7F2;
  --orange-soft:#FBE4D2;
  --text-primary:#1C2A3A;  /* grafite */
  --text-secondary:#4E5D6E;
  --text-on-deep:#F3EFE6;  /* texto sobre o fundo escuro, nunca branco puro */
  --dot:rgba(243,239,230,.16);
  --dot-light:rgba(23,75,120,.18); /* pontos do mapa sobre o fundo claro (fora do pacote: derivado do azul) */
  --dot-light-soft:rgba(23,75,120,.09); /* a mesma grade, em sussurro, nas seções claras: a página é um lugar só */
  --grat:rgba(243,239,230,.06); /* meridianos e paralelos sutis sobre o mapa escuro */
  --placa:#20425B;         /* azul de fundo do JPG do logo da Hanur: as duas placas das operadoras usam o mesmo */
  --wa:#25D366;            /* só no botão do WhatsApp */
  --erro:#B42318;          /* mensagens de erro do formulário (fora do pacote: necessário para o formulário) */

  /* Fontes */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-text:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Movimento: duas curvas para tudo */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);

  /* Sombra de texto sobre o mapa (três camadas) */
  --tshadow:0 1px 2px rgba(5,12,24,.9),0 3px 12px rgba(5,12,24,.7),0 10px 44px rgba(5,12,24,.7);

  --gutter:clamp(40px,7vw,120px);
  --nav-h:72px;
  --selo-h:32px;
  --radius:18px;
  --sec-pad:clamp(72px,9vw,128px);
  /* x da linha condutora: 28px à esquerda do início do conteúdo (o contêiner tem 1240px no máximo) */
  --spine-x:calc(max(var(--gutter),(100% - 1240px) / 2 + var(--gutter)) - 28px);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;
  background:var(--canvas);color:var(--text-primary);
  font-family:var(--font-text);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:1024px){body{font-size:18px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

img,svg{display:block;max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:800;line-height:1.05;letter-spacing:-.01em}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
strong{font-weight:600}
main:focus{outline:none}

/* Anel de foco: laranja sobre as superfícies escuras; azul sobre as claras (3:1 não textual); off-white sobre botão laranja */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.sec--light :focus-visible,.form :focus-visible,.form__sucesso :focus-visible{outline-color:var(--blue)}
.btn--primary:focus-visible,.hold:focus-visible{outline-color:var(--text-on-deep)}
.form .btn--primary:focus-visible{outline-color:var(--blue)}

[hidden]{display:none!important}
.form__armadilha{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.mono{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
@media (min-width:1024px){.mono{font-size:13px}}

.container{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gutter)}

.h2{font-size:clamp(28px,3.2vw,44px);color:var(--blue);max-width:22ch}
.sec--dark .h2{color:var(--text-on-deep)}
.h2--center{text-align:center;margin-left:auto;margin-right:auto}
.lede{font-size:clamp(17px,1.4vw,21px);max-width:58ch;color:var(--text-secondary)}
.sec--dark .lede{color:var(--text-on-deep);opacity:.88}

/* ---------- Botões ---------- */
/* O brilho do hover vive num ::after em força total e só a opacidade dele anima (regra "só transform e opacity").
   A cor de fundo do hover ainda transita (desvio declarado: só em hover, pintura barata, sem layout). */
.btn{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:14px 26px;border:0;border-radius:999px;
  font-family:var(--font-text);font-weight:600;font-size:15px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;text-shadow:none;
  transition:transform .35s var(--ease-out),background-color .35s var(--ease-out);
}
@media (min-width:1024px){.btn{font-size:16px}}
.btn .ico{width:20px;height:20px;flex:none;transition:transform .35s var(--ease-out)}
.btn:hover .ico{transform:translateX(4px)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .35s var(--ease-out)}
.btn--primary{background:var(--accent);color:var(--text-primary);box-shadow:0 8px 24px rgba(233,120,39,.28)}
.btn--primary::after{box-shadow:0 12px 30px rgba(233,120,39,.36)}
.btn--primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn--primary:hover::after{opacity:1}
.btn--small{min-height:44px;padding:10px 18px;font-size:13px;box-shadow:none}
/* Botão de contorno sobre fundo escuro (segunda ação da abertura) */
.btn--contorno{background:transparent;color:var(--text-on-deep);border:2px solid rgba(243,239,230,.65);box-shadow:none}
.btn--contorno:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn--contorno:focus-visible{outline-color:var(--text-on-deep)}
.btn--block{width:100%}
.btn--wa{background:var(--wa);color:var(--text-primary);text-transform:none;letter-spacing:0;font-size:17px;padding:16px 28px;box-shadow:0 8px 24px rgba(37,211,102,.3)}
.btn--wa::after{box-shadow:0 12px 30px rgba(37,211,102,.38)}
.btn--wa:hover{transform:translateY(-2px)}
.btn--wa:hover::after{opacity:1}
/* "Enviando...": fundo fixo em vez de opacidade (grafite sobre laranja claro, 5,8:1) */
.btn:disabled{cursor:progress;transform:none}
.btn--primary:disabled{background:var(--accent-hover);box-shadow:none}
@media (pointer:coarse){.btn,.hold,.wa-float,.rodape__link,.link-mono{min-height:44px}}

/* Endereço de site: fonte mono, mas em minúsculas como no copy.md */
.link-mono{display:inline-flex;align-items:center;color:var(--blue);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;font-size:13px;text-transform:none;letter-spacing:.02em}
.link-mono:hover{color:var(--text-primary)}

/* ---------- Selo fixo da data ---------- */
.selo{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:70;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 20px;border-radius:999px;
  background:var(--accent);color:var(--text-primary);text-decoration:none;
  box-shadow:0 6px 20px rgba(5,12,24,.3);
  transition:background-color .35s var(--ease-out),transform .35s var(--ease-out);
}
.selo:hover{background:var(--accent-hover)}
.selo:focus-visible{outline-color:var(--text-on-deep)}
/* Chamada comercial no selo: fonte de texto em negrito, caixa alta, seta que avança no hover */
.selo--cta{
  font-family:var(--font-text);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  gap:10px;padding:10px 22px 10px 24px;
  box-shadow:0 6px 20px rgba(5,12,24,.3),0 0 0 0 rgba(233,120,39,.45);
  animation:selo-pulse 3.2s var(--ease-out) infinite;animation-delay:-1.1s;
}
.selo__seta{width:18px;height:18px;flex:none;transition:transform .35s var(--ease-out)}
.selo--cta:hover .selo__seta{transform:translateX(4px)}
@keyframes selo-pulse{
  0%{box-shadow:0 6px 20px rgba(5,12,24,.3),0 0 0 0 rgba(233,120,39,.45)}
  70%{box-shadow:0 6px 20px rgba(5,12,24,.3),0 0 0 12px rgba(233,120,39,0)}
  100%{box-shadow:0 6px 20px rgba(5,12,24,.3),0 0 0 0 rgba(233,120,39,0)}
}
@media (prefers-reduced-motion:reduce){.selo--cta{animation:none}}

/* ---------- Barra de navegação ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--gutter);
  background:rgba(15,39,66,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--text-on-deep);
}
/* Os dois logos ficam sobre uma placa clara única (o azul-marinho deles não lê sobre a barra escura) */
.nav__logos{display:flex;align-items:center;gap:18px;padding:7px 16px;border-radius:12px;background:#F7F5F0;box-shadow:0 4px 14px rgba(5,12,24,.25)}
.nav__logos::before{content:"";order:1;width:1px;height:28px;background:rgba(28,42,58,.18)}
.nav__logo--hanur-sf{order:0}
.nav__logo--somada-sf{order:2}
.nav__logo{height:40px;border-radius:6px}
.nav__logo--hanur{width:auto;height:40px}
/* Logo da Somada em placa clara (o logo tem texto azul-marinho, que não leria sobre a barra escura) */
.nav__logo--somada{
  display:inline-flex;align-items:center;padding:0 10px;
  background:#F7F7F7;
}
.nav__logo--somada img{height:30px;width:auto;display:block}
/* Logos sem fundo na barra (teste da cliente): sem placa, só a imagem */
.nav__logo--hanur-sf{height:40px;width:auto;border-radius:0}
.nav__logo--somada-sf{height:32px;width:auto;border-radius:0}
/* Variante de barra clara (opção B), para os logos azul-marinho lerem bem */
.nav.nav--clara{background:rgba(247,244,237,.94);color:var(--text-primary);box-shadow:0 1px 0 rgba(28,42,58,.08)}
@media (max-width:720px){.nav.nav--clara{background:var(--canvas);-webkit-backdrop-filter:none;backdrop-filter:none}}
.nav__cta{flex:none}
/* Telas médias (tablet e notebooks estreitos): a barra não comporta logos, selo e botão.
   O botão da barra some (o hero já tem o mesmo botão) e o selo vai para a direita. */
@media (min-width:721px) and (max-width:1100px){
  .nav__cta{display:none}
  .selo{left:auto;right:var(--gutter);transform:none}
}

/* ---------- Botão flutuante do WhatsApp ---------- */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:70;
  width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--wa);color:var(--text-primary);
  box-shadow:0 10px 28px rgba(5,12,24,.3);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),visibility 0s 0s;
}
.wa-float svg{width:30px;height:30px}
.wa-float:hover{transform:translateY(-3px)}
/* Escondido: some suave e sai da ordem de tabulação (visibility depois do fade) */
body.form-visible .wa-float{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),visibility 0s .4s}

/* ============================================================
   MAPA (componentes compartilhados pelo hero, pelo mini-mapa e pelo local)
   ============================================================ */
.map{position:absolute;inset:0;overflow:hidden}
.dots{position:absolute;left:-22px;top:-22px;width:calc(100% + 44px);height:calc(100% + 44px);pointer-events:none}
.live .dots{animation:dots-drift 90s linear infinite;animation-delay:-30s}
@keyframes dots-drift{from{transform:translate(0,0)}to{transform:translate(22px,22px)}}
/* Graticula: meridianos e paralelos em sussurro, para a grade de pontos ler como mapa */
.map--hero::before,.map--mini::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,var(--grat) 1px,transparent 1px),linear-gradient(180deg,var(--grat) 1px,transparent 1px);
  background-size:12.5% 100%,100% 25%;
}
/* Foto de fundo do mapa do hero, com véu azul (a grade de pontos e a graticula saíram a pedido da cliente) */
.map__foto{position:absolute;inset:0;z-index:0}
.map__foto img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
/* Véu azul mais leve (a cliente pediu a foto cerca de 50% mais visível em 11/11/2026); o lado do texto fica um pouco mais coberto */
.map__foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,39,66,.66) 0%,rgba(15,39,66,.5) 44%,rgba(15,39,66,.28) 100%),
             linear-gradient(180deg,rgba(15,39,66,.3) 0%,rgba(15,39,66,.04) 40%,rgba(15,39,66,.6) 100%)}
.map--hero::before{display:none}
.map__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map__arc{
  fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:var(--len);
  stroke-dashoffset:calc(var(--len) * (1 - var(--draw,1)));
}
.map__arc--glow{stroke:var(--accent-muted);stroke-width:12;opacity:calc(var(--pulse,0) * .9)}

/* Nó: ponto de 10px com anel de 28px e rótulo mono (lado trocado com .map__node--sp e .map__node--left) */
.map__node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:10px;height:10px}
.map__dot{position:absolute;inset:0;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(15,39,66,.6);transition:transform .6s var(--ease-out)}
.map__ring{position:absolute;inset:-9px;border-radius:50%;border:1.5px solid var(--accent);opacity:0}
.live .map__ring{animation:ring-pulse 4s var(--ease-out) infinite;animation-delay:var(--pd,0s)}
@keyframes ring-pulse{0%{transform:scale(.5);opacity:.9}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}
.map__label{position:absolute;left:22px;top:50%;transform:translateY(-50%);white-space:nowrap;color:var(--text-on-deep);opacity:.85}
.map__node--sp .map__label,.map__node--left .map__label{left:auto;right:22px}
/* Rabo da rota (só no hero): desce do nó de São Paulo até o pé do palco, aparece no encontro (--meet) */
.map__tail{position:absolute;left:50%;top:50%;width:3px;height:100vh;margin-left:-1.5px;pointer-events:none;opacity:var(--meet,0);background-image:radial-gradient(circle,var(--accent) 1.5px,transparent 2px);background-size:3px 10px}

/* Cartão-postal: espaço reservado de foto desenhado (o cliente escolhe a foto depois) */
.postal{
  position:relative;margin:0;padding:10px 10px 30px;border-radius:14px;
  background:var(--panel);box-shadow:0 14px 36px rgba(15,39,66,.22);
  transform:rotate(var(--rot,-2deg));
}
.postal__img{
  position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;
  background:
    radial-gradient(circle at 74% 28%,var(--orange-soft) 0 6%,transparent 6.5%),
    linear-gradient(180deg,var(--blue-soft) 0 58%,#E9EEF0 58% 60%,#D9E3EC 60% 100%);
}
.postal__img::before{content:"";position:absolute;left:8%;right:8%;top:58%;height:1px;background:rgba(23,75,120,.25)}
.postal__tag{position:absolute;left:10px;bottom:10px;padding:4px 8px;border-radius:6px;background:rgba(252,251,247,.82);color:var(--text-secondary);font-size:12px}
/* Moldura com foto real: a foto cobre a área toda, sem o desenho de espaço reservado */
.postal__img--foto{background:var(--blue-soft)}
.postal__img--foto::before{display:none}
.postal__img--foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   HERO (scroll): 400vh com palco sticky de 100vh
   (o padrão dimensiona em distância de scroll: 400vh dá platô de 5 a 6 flicks por faixa)
   ============================================================ */
/* ---------- Abertura: chamada do evento sobre a foto da sala ---------- */
.abre{
  position:relative;z-index:0;isolation:isolate;overflow:hidden;
  min-height:100vh;display:grid;align-items:center;
  padding:calc(var(--nav-h) + 56px) 0 72px;
  background:var(--canvas-deep);color:var(--text-on-deep);
}
.abre__bg{position:absolute;inset:0;z-index:-2}
.abre__bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block;filter:saturate(.9)}
.abre__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(15,39,66,.95) 0%,rgba(15,39,66,.82) 42%,rgba(15,39,66,.38) 100%),
             linear-gradient(180deg,rgba(15,39,66,.35) 0%,rgba(15,39,66,0) 40%,rgba(15,39,66,.92) 100%)}
.abre__inner{display:grid;gap:18px;justify-items:start}
.abre__kicker{color:var(--accent);font-size:13px;letter-spacing:.14em}
/* Título grande "Workshop Capacitação" (pedido da cliente em 11/11/2026); a frase abaixo ficou menor */
.abre__titulo{font-family:var(--font-display);font-weight:800;line-height:1;letter-spacing:-.015em;
  font-size:clamp(44px,6.2vw,88px);max-width:12ch;color:var(--text-on-deep);text-shadow:var(--tshadow);text-transform:uppercase}
.abre__frase{font-family:var(--font-display);font-weight:800;line-height:1.12;letter-spacing:-.005em;
  font-size:clamp(22px,2.4vw,34px);max-width:22ch;color:var(--text-on-deep);text-shadow:var(--tshadow)}
.abre__texto{font-size:clamp(17px,1.4vw,21px);line-height:1.55;max-width:54ch;color:var(--text-on-deep);opacity:.92;text-shadow:0 1px 2px rgba(5,5,10,.6)}
.abre__acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.abre .btn{text-shadow:none}
@media (max-width:720px){
  .abre{min-height:0;padding:calc(60px + 28px) 0 56px}
  .abre__acoes{width:100%}
  .abre__acoes .btn{width:100%}
}

.hero{position:relative;height:400vh;background:var(--canvas-deep);color:var(--text-on-deep)}
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.map--hero{inset:0}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(8,20,36,0) 35%,rgba(8,20,36,.62) 100%)}

/* Nós e arcos comandados pelo progresso (variáveis escritas pelo JS no palco) */
.hero .map__node{opacity:var(--nodes,1);transition:none}
.hero .map__arc--eu{--draw:var(--arc1,0)}
.hero .map__arc--as{--draw:var(--arc2,0)}
.hero .map__node--sp .map__dot{transform:scale(calc(1 + .8 * var(--meet,0)));transition:none}

/* Cartões-postais ancorados perto de Lisboa (acima e à direita do rótulo) e de Seul (abaixo do arco) */
.postal--hero{position:absolute;width:clamp(150px,17vw,250px);transform-origin:50% 100%;will-change:transform,opacity}
.postal--eu{left:66%;top:12%;opacity:var(--card1,1);transform:rotate(calc(var(--rot) + 10deg * (1 - var(--card1,1)))) translateY(calc(30px * (1 - var(--card1,1))))}
.postal--as{left:70%;top:50%;opacity:var(--card2,1);transform:rotate(calc(var(--rot) - 10deg * (1 - var(--card2,1)))) translateY(calc(30px * (1 - var(--card2,1))))}

.hero__text{position:absolute;left:0;top:0;bottom:0;width:46%;padding:var(--nav-h) 24px 12vh var(--gutter)}
/* Faixa inativa: além da opacidade, visibility:hidden tira o link do Tab (o palco sticky já está na tela) */
.band{
  position:absolute;inset:0;padding:inherit;display:flex;flex-direction:column;justify-content:center;gap:22px;
  opacity:var(--o,0);visibility:hidden;pointer-events:none;text-shadow:var(--tshadow);isolation:isolate;
  transition:visibility 0s .3s;
}
.band.is-on{pointer-events:auto;visibility:visible;transition:visibility 0s 0s}
.band::before{
  content:"";position:absolute;inset:-6% -10% -6% -40%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75 * var(--k,1));
  background:radial-gradient(ellipse 70% 62% at 45% 50%,rgba(8,20,36,.55) 0%,rgba(8,20,36,.36) 46%,rgba(8,20,36,0) 76%);
}
.band > *{position:relative}
.eyebrow{color:var(--accent);opacity:var(--k,1);transform:translateY(calc((1 - var(--k,1)) * 10px))}
/* H1 em 4 ou 5 linhas dentro da coluna de 46% (pacote: 40 a 72px; aqui 40 a 54px, desvio declarado para o título não virar uma torre de 7 linhas) */
.hero__h1{font-size:clamp(40px,3.3vw,54px);max-width:16ch}
.hero__sub{font-size:clamp(18px,1.5vw,22px);max-width:40ch;transform-origin:0 50%}
.hero__free{font-size:clamp(20px,1.7vw,26px);font-weight:600;max-width:40ch;line-height:1.35}
.hero__free .em{color:var(--accent)}
.hero__cta{align-self:flex-start}

/* Palavras divididas pelo JS (.w = palavra). Só transform e opacity, comandados por --k */
.w{display:inline-block}
/* (e) subida palavra por palavra: faixa 1 */
.band--1 .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * .55em))}
/* (g) aproximação da profundidade no subtítulo; chips deslizam como etiquetas de bagagem */
.band--2 .hero__sub{--kc:clamp(0,var(--k,0) * 1.8,1);opacity:var(--kc);transform:scale(calc(.82 + .18 * var(--kc)))}
.band--2 .chip{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc)) * -28px)) rotate(calc((1 - var(--kc)) * -6deg))}
/* (d) soco de palavra com overshoot; "80 vagas" em ênfase; botão sobe por último */
.band--3 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1)) * var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.6 + (.4 + var(--ov,.12)) * var(--kc) - var(--ov,.12) * var(--ks)));
}
.band--3 .w.em{--ov:.26;--sd:.16;--ss:2.6}
.band--3 .hero__cta{--kb:clamp(0,(var(--k,0) - .6) * 2.5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 18px))}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;min-height:36px;padding:8px 14px;border-radius:10px;
  background:rgba(8,20,36,.55);border:1px solid rgba(243,239,230,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(5,12,24,.85);transform-origin:0 50%;
}

.hero__cue{position:absolute;left:50%;bottom:22px;width:28px;height:28px;margin-left:-14px;color:var(--text-on-deep);opacity:.55}
.live .hero__cue{animation:cue 2.6s var(--ease-inout) infinite;animation-delay:-1.3s}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media (max-height:560px){.hero__cue{display:none}}

/* ---------- Os cinco portões do hero estático (idênticos no JS: GATES) ---------- */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  /* Hero estático: o mapa ganha uma zona própria no topo (sem texto por cima); o texto empilha abaixo, sobre canvas-deep limpo.
     Os nós usam data-gx/data-gy (escritos pelo JS); cartões e rótulos são reposicionados aqui. */
  .hero{--map-zone:clamp(280px,38vh,520px);height:auto;min-height:max(100vh,640px)}
  .hero__stage{position:relative;height:auto;min-height:max(100vh,640px);overflow:hidden}
  /* O mapa começa abaixo da barra do topo, para os arcos e o nó de Lisboa nunca ficarem escondidos atrás dela */
  .map--hero{inset:auto;top:calc(var(--nav-h) + 8px);left:0;right:0;height:var(--map-zone)}
  .hero__text{position:relative;width:auto;max-width:760px;padding:calc(var(--map-zone) + var(--nav-h) + 16px) var(--gutter) 64px}
  .band{position:relative;inset:auto;padding:0;opacity:1!important;--o:1!important;--k:1!important;visibility:visible;pointer-events:auto;margin-bottom:18px;gap:16px}
  .band::before{display:none}
  .band .w,.band .chip,.band .hero__sub,.band .hero__cta,.band .eyebrow{opacity:1!important;transform:none!important}
  .hero .map__node{opacity:1}
  .hero .map__arc{--draw:1!important}
  .hero .map__arc--glow{opacity:.35}
  .hero .map__node--sp .map__dot{transform:scale(1.5)}
  .hero .map__tail{display:none}
  .map--hero .map__node--sp .map__label,.map--hero .map__node--left .map__label{left:22px;right:auto}
  .postal--hero{width:clamp(100px,22vw,170px);opacity:1!important;transform:rotate(var(--rot))!important}
  .postal--eu{left:auto;right:34%;top:50%}
  .postal--as{left:auto;right:3%;top:46%}
  .hero__cue{display:none}
  .spine__link{display:none}
}
@media (max-width:720px){
  .hero__h1{font-size:clamp(34px,9.5vw,44px)}
}
/* Sem JavaScript: o hero vira o bloco estático, com tudo visível */
html:not(.js) .hero{height:auto;min-height:max(100vh,640px)}
html:not(.js) .hero__stage{position:relative;height:auto;min-height:max(100vh,640px)}
html:not(.js) .hero__text{position:relative;width:auto;max-width:760px;padding:min(36vh,330px) var(--gutter) 72px}
html:not(.js) .band{position:relative;inset:auto;padding:0;opacity:1;visibility:visible;--o:1;--k:1;pointer-events:auto;margin-bottom:22px}
html:not(.js) .hero .map__arc{--draw:1}
html:not(.js) .hero__cue{display:none}

/* ============================================================
   SEÇÕES ABAIXO DA DOBRA
   ============================================================ */
.sec{position:relative;padding:var(--sec-pad) 0}
.sec--light{background:var(--canvas);color:var(--text-primary);--dotc:var(--dot-light-soft)}
.sec--dark{background:var(--canvas-deep);color:var(--text-on-deep);--dotc:var(--dot)}
.sec > .container{position:relative;z-index:1}
/* Camada de ambiente: a mesma grade de pontos em toda seção e no rodapé (cor por superfície), derivando devagar quando na tela */
.sec::before,.rodape::before{
  content:"";position:absolute;inset:-22px;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,var(--dotc) 1.5px,transparent 2px);background-size:22px 22px;
}
.sec.live::before,.rodape.live::before{animation:dots-drift 90s linear infinite;animation-delay:-30s}

/* Linha condutora da rota: nasce no rabo do nó de São Paulo (fim do hero), desce junto ao conteúdo
   e termina no nó sobre o cartão do formulário (seção 08). Peso visível: 3px, pontos de 1,5px. */
.spine{position:absolute;left:var(--spine-x);top:0;bottom:0;width:3px;margin-left:-1.5px;overflow:hidden;pointer-events:none;z-index:1}
.spine__line{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--accent) 1.5px,transparent 2px);background-size:3px 10px;
  transform:translateY(-101%);transition:transform 1.6s var(--ease-out);
}
.sec--light .spine__line{opacity:.6}
.sec.in .spine__line,.rodape.in .spine__line{transform:translateY(0)}
/* Conector horizontal no topo da seção 01, da linha até o x do nó de São Paulo (largura medida pelo JS) */
.spine__link{position:absolute;left:var(--spine-x);top:0;width:var(--link-w,0px);height:3px;margin-top:-1.5px;pointer-events:none;z-index:1;opacity:.6;background-image:radial-gradient(circle,var(--accent) 1.5px,transparent 2px);background-size:10px 3px}
.sec__num{
  position:absolute;left:var(--spine-x);top:var(--sec-pad);z-index:2;
  width:32px;height:32px;margin-left:-16px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--text-primary);font-size:12px;letter-spacing:.04em;
  box-shadow:0 0 0 4px var(--canvas);
  transform:scale(0);transition:transform .7s var(--ease-out) .4s;
}
.sec--dark .sec__num{box-shadow:0 0 0 4px var(--canvas-deep)}
.sec.in .sec__num{transform:scale(1)}
.sec__num::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--accent);opacity:0}
.live .sec__num::after{animation:ring-pulse 4s var(--ease-out) infinite;animation-delay:-1.1s}

/* Entradas: o contêiner [data-enter] ganha .in; as partes chegam escalonadas */
[data-enter] .part{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
[data-enter].in .part{opacity:1;transform:none}
[data-enter].in .part:nth-child(2){transition-delay:.08s}
[data-enter].in .part:nth-child(3){transition-delay:.16s}
[data-enter].in .part:nth-child(4){transition-delay:.24s}
[data-enter].in .part:nth-child(5){transition-delay:.32s}
[data-enter].in .part:nth-child(6){transition-delay:.4s}
[data-enter].in .part:nth-child(7){transition-delay:.48s}
[data-enter].in .part:nth-child(8){transition-delay:.56s}
[data-enter].in .part:nth-child(9){transition-delay:.64s}
[data-enter].in .part:nth-child(10){transition-delay:.72s}
[data-enter].in .part:nth-child(11){transition-delay:.8s}
[data-enter].in .part:nth-child(12){transition-delay:.88s}
/* Aposentadoria dos atrasos depois da entrada (mesma especificidade, regra posterior) */
[data-enter].in.settled .part:nth-child(n){transition-delay:0s}
/* Cartões-postais que entram mantêm a rotação própria */
[data-enter] .postal.part{transform:translateY(22px) rotate(var(--rot,-2deg))}
[data-enter].in .postal.part{transform:rotate(var(--rot,-2deg))}

/* ---------- 01. Participação gratuita + números ---------- */
.participacao__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,80px);align-items:center}
.participacao__h2{font-size:clamp(24px,2.6vw,36px);color:var(--blue);max-width:24ch}
.participacao__texto{display:grid;gap:22px}
.contadores{display:grid;gap:18px;border-left:2px solid var(--accent-muted);padding-left:clamp(20px,3vw,40px)}
.contador{display:flex;flex-direction:column;font-family:var(--font-display);font-weight:800;line-height:1;color:var(--text-primary)}
.contador__big{font-size:clamp(44px,5.5vw,84px);letter-spacing:-.02em;color:var(--blue)}
.contador__txt{font-size:clamp(16px,1.6vw,22px);letter-spacing:.06em;margin-top:6px}
@media (max-width:860px){
  .participacao__grid{grid-template-columns:1fr}
  .contadores{grid-template-columns:repeat(3,auto);justify-content:start;gap:28px;border-left:0;padding-left:0;border-top:2px solid var(--accent-muted);padding-top:24px}
}
@media (max-width:520px){.contadores{grid-template-columns:1fr}}

/* ---------- 02. As duas rotas + segurar ---------- */
.rotas .container{position:relative}
.map--mini{position:relative;inset:auto;aspect-ratio:16/8.5;border-radius:var(--radius);background:var(--panel-deep);overflow:hidden;isolation:isolate}
.rotas .map__arc{--draw:var(--hold,0)}
.rotas .map__arc--glow{opacity:calc(var(--hold,0) * .35)}
.rotas.is-done .map__arc{--draw:1}
.rotas.is-done .map__arc--glow{opacity:.45}
.map__node--hold{width:0;height:0}
.map__node--hold .map__label{right:54px}
.hold{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:84px;height:84px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--accent);color:var(--text-primary);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 0 0 6px rgba(233,120,39,.18),0 14px 34px rgba(5,12,24,.4);
  transition:transform .5s var(--ease-out),background-color .35s var(--ease-out);
}
/* Brilho do estado concluído num ::after (só a opacidade anima) */
.hold::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 10px rgba(233,120,39,.22);opacity:0;transition:opacity .5s var(--ease-out);pointer-events:none}
.hold:hover{background:var(--accent-hover)}
.hold.is-holding{transform:translate(-50%,-50%) scale(.94)}
.rotas.is-done .hold{transform:translate(-50%,-50%) scale(1.1)}
.rotas.is-done .hold::after{opacity:1}
.hold__hand{width:30px;height:30px}
.hold__hint{font-size:12px;letter-spacing:.14em;transition:opacity .4s var(--ease-out)}
/* Rotas traçadas (à mão ou automaticamente no celular): a dica "SEGURE" some, pois não há mais o que segurar */
.rotas.is-done .hold__hint{opacity:0}
.hold__ring{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);transform:rotate(-90deg);pointer-events:none}
.hold__track{fill:none;stroke:rgba(243,239,230,.18);stroke-width:4}
.hold__fill{fill:none;stroke:var(--text-on-deep);stroke-width:4;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:calc(289 * (1 - var(--hold,0)))}
.rotas.is-done .hold__fill{stroke-dashoffset:0}
.rotas .map__node--hold::after{content:"";position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;pointer-events:none}
.rotas.live.is-done .map__node--hold::after{animation:ring-pulse 4s var(--ease-out) infinite;animation-delay:-2s}

/* Seção 02 sem o mini-mapa (retirado a pedido da cliente): os dois cartões lado a lado, entrando com a seção */
.rotas__cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:0}
.rota-card{
  position:relative;padding:28px;border-radius:var(--radius);background:var(--panel-deep);
  border-top:4px solid var(--accent);
  opacity:0;transform:translateY(12px);
  transition:opacity .8s var(--ease-out),transform .9s var(--ease-out);
}
.rota-card--eu{border-top-color:var(--blue-soft)}
.rota-card__h3{font-size:clamp(20px,1.6vw,24px);margin-bottom:12px;color:var(--text-on-deep)}
.rotas.in .rota-card{opacity:1;transform:none}
.rotas.in .rota-card--as{transition-delay:.2s}
.rotas__cta{margin-top:32px;text-align:center}
@media (max-width:720px){
  .rotas__cards{grid-template-columns:1fr}
}

/* ---------- 03. Benefícios (carimbos) ---------- */
.beneficios__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:clamp(36px,4vw,56px)}
.beneficio{
  grid-column:span 2;position:relative;padding:28px 28px 28px 28px;border-radius:var(--radius);
  background:var(--panel);border:1px solid rgba(23,42,58,.08);box-shadow:0 10px 30px rgba(15,39,66,.08);
  display:grid;gap:18px;align-content:start;
}
.beneficio:nth-child(4){grid-column:2 / span 2}
.beneficio:nth-child(5){grid-column:4 / span 2}
.beneficio p{font-size:17px;line-height:1.5}
.carimbo{
  position:relative;width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--text-primary);font-size:14px;letter-spacing:.06em;
  outline:2px dashed var(--accent);outline-offset:4px;
  transform:rotate(-14deg);transition:transform .9s var(--ease-out) .3s;
}
[data-enter].in .carimbo{transform:rotate(-6deg)}
.carimbo::after{content:"";position:absolute;inset:-8px;border-radius:50%;box-shadow:0 0 0 6px rgba(233,120,39,.22),0 0 30px rgba(233,120,39,.6);opacity:0;transition:opacity .5s var(--ease-out)}
.beneficio:hover .carimbo::after{opacity:1}
@media (max-width:1023px){
  .beneficios__grid{grid-template-columns:1fr 1fr}
  .beneficio,.beneficio:nth-child(4),.beneficio:nth-child(5){grid-column:auto}
  .beneficio:nth-child(5){grid-column:1 / -1;max-width:calc(50% - 10px);width:100%;justify-self:center}
}
@media (max-width:640px){
  .beneficios__grid{grid-template-columns:1fr}
  .beneficio:nth-child(5){max-width:none}
}

/* ---------- 04. Presentes (etiquetas de bagagem), seção menor ---------- */
.presentes{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px);border-top:4px solid var(--accent)}
.presentes .sec__num{top:clamp(48px,6vw,88px)}
.presentes__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:start}
.presentes__h2{font-size:clamp(24px,2.6vw,36px);max-width:20ch}
.etiquetas{display:grid;gap:18px}
.presentes__nota{grid-column:1 / -1;font-size:15px;color:var(--text-secondary);max-width:70ch}
/* Etiqueta: o recorte fica no corpo; o cordão é irmão (fora do recorte) e sai pelo furo para cima e para fora */
.etiqueta{position:relative;--tagcor:var(--accent)}
.etiqueta--azul{--tagcor:var(--blue)}
.etiqueta__corpo{
  position:relative;padding:22px 22px 22px 58px;border-radius:12px;
  background:var(--panel);box-shadow:0 10px 26px rgba(15,39,66,.1);
  clip-path:polygon(22px 0,100% 0,100% 100%,22px 100%,0 calc(100% - 22px),0 22px);
}
.etiqueta__corpo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--tagcor)}
.etiqueta__corpo::after{content:"";position:absolute;left:24px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--canvas);box-shadow:inset 0 0 0 2px rgba(28,42,58,.35)}
.etiqueta__cordao{position:absolute;left:-7px;top:calc(50% - 58px);width:44px;height:64px;color:var(--text-secondary);opacity:.6;z-index:1;pointer-events:none}
.etiqueta__h3{font-size:clamp(18px,1.5vw,22px);color:var(--blue);margin-bottom:8px}
.etiqueta--laranja .etiqueta__h3{color:var(--text-primary)}
.etiqueta p{font-size:16px;color:var(--text-secondary)}
@media (max-width:860px){.presentes__grid{grid-template-columns:1fr}}

/* ---------- 05. Programação (linha do tempo) ---------- */
/* Abertura diferente da vizinha 04: H2 centralizado e a foto larga sangrando a largura do contêiner */
.programacao__topo{display:grid;grid-template-columns:1fr;justify-items:center;gap:clamp(28px,4vw,48px);margin-bottom:clamp(40px,5vw,72px)}
.postal--wide{width:100%;max-width:none}
.postal--wide .postal__img{aspect-ratio:21/9}
.prog{position:relative}
/* Duas colunas paralelas (manhã Europa | tarde Ásia) com a linha do tempo no meio; o almoço abre a coluna da tarde */
.prog__body{position:relative;display:grid;grid-template-columns:1fr 56px 1fr;grid-auto-flow:row dense;column-gap:0;row-gap:14px}
.prog__linha{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--accent-muted);transform:scaleY(0);transform-origin:50% 0;transition:transform 1.8s var(--ease-out)}
.programacao.in .prog__linha{transform:scaleY(1)}
.prog__item{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:baseline;
  padding:16px 20px;border-radius:14px;background:var(--panel-deep);
}
.prog__item--manha{grid-column:1}
.prog__item--tarde{grid-column:3}
.prog__item--almoco{grid-column:3;grid-row:1;border:1.5px solid var(--accent)}
.prog__item--almoco .prog__atv{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,1.8vw,26px)}
.prog__item::before{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--canvas-deep)}
.prog__item--manha::before{right:-34px}
.prog__item--tarde::before,.prog__item--almoco::before{left:-35px}
/* Horários em off-white (10:1); o laranja fica para a rota e o CTA */
.prog__hora{color:var(--text-on-deep);font-size:13px}
.prog__atv{font-weight:600;font-size:16px;line-height:1.45}
.prog__item .tag{grid-column:1 / -1;justify-self:start}
/* Etiqueta do responsável: caixa como no copy.md (sem uppercase), mono 12/13px */
.tag{display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border-radius:999px;font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.04em}
@media (min-width:1024px){.tag{font-size:13px}}
.tag--azul{background:var(--blue-soft);color:var(--blue)}
.tag--laranja{background:var(--orange-soft);color:var(--text-primary)}
.tag--neutro{background:rgba(243,239,230,.14);color:var(--text-on-deep)}
.programacao__pilula{margin-top:clamp(36px,4vw,56px);text-align:center}
.pilula{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:10px 20px;border-radius:999px;border:1.5px solid rgba(243,239,230,.35);color:var(--text-on-deep)}
@media (max-width:860px){
  .prog__body{grid-template-columns:28px 1fr}
  .prog__linha{left:14px}
  .prog__item--manha,.prog__item--tarde,.prog__item--almoco{grid-column:2}
  .prog__item--almoco{grid-row:auto}
  .prog__item::before,.prog__item--almoco::before{left:-26px;right:auto;top:28px}
}

/* ---------- 03. Convite em vídeo ---------- */
.convite__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
.convite__texto{display:grid;gap:16px}
.video{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--canvas-deep);box-shadow:0 18px 44px rgba(15,39,66,.25);border:1px solid rgba(23,42,58,.1)}
.video__vazio{position:relative;aspect-ratio:16/9;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(23,75,120,.9) 0%,var(--canvas-deep) 70%)}
.video__frame{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.video__play{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--text-primary);box-shadow:0 0 0 12px rgba(233,120,39,.18)}
.video__play svg{width:34px;height:34px;margin-left:4px}
[data-enter].live .video__play{animation:ring-pulse-soft 3s var(--ease-out) infinite;animation-delay:-1s}
@keyframes ring-pulse-soft{0%{box-shadow:0 0 0 12px rgba(233,120,39,.18)}60%{box-shadow:0 0 0 22px rgba(233,120,39,0)}100%{box-shadow:0 0 0 12px rgba(233,120,39,0)}}
@media (max-width:900px){.convite__grid{grid-template-columns:1fr}}

/* ---------- 07. Operadoras ---------- */
.operadoras__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:clamp(36px,4vw,56px)}
.op-card{border-radius:var(--radius);overflow:hidden;background:var(--panel);box-shadow:0 14px 36px rgba(15,39,66,.1);border:1px solid rgba(23,42,58,.08)}
/* Topo do cartão só com o logo (sem foto): faixa de cor da marca, logo centralizado */
.op-card__logo{display:grid;place-items:center;min-height:150px;padding:28px 32px;border-bottom:4px solid var(--accent)}
.op-card__logo img{width:min(100%,260px);height:auto;display:block}
.op-card__logo--hanur{background:#F7F5F0}
.op-card__logo--somada{background:#F7F5F0;border-bottom-color:var(--blue)}
.op-card__corpo{padding:28px;display:grid;gap:14px}
.op-card__h3{font-size:clamp(20px,1.7vw,26px);color:var(--blue)}
.op-card p{color:var(--text-secondary)}
@media (max-width:760px){.operadoras__grid{grid-template-columns:1fr}}

/* ---------- 07. Local ---------- */
/* Esqueleto próprio: cartão do endereço centralizado sobre o mapa de pontos em largura total; a foto espia por trás do cartão */
.local__grid{position:relative;display:grid;grid-template-columns:1fr;justify-items:center;gap:0;min-height:420px}
.local{overflow:hidden}
.local__mapa{position:absolute;inset:-24px calc(var(--gutter) * -1) -24px calc(var(--gutter) * -1);border-radius:0;overflow:hidden;pointer-events:none}
.local__mapa .dots{opacity:1}
.map__node--local .map__label{color:var(--blue);opacity:1;left:22px;right:auto}
.map__node--local .map__dot{box-shadow:0 0 0 3px var(--canvas)}
.local__card{position:relative;z-index:1;width:100%;max-width:680px;padding:clamp(28px,3vw,44px);border-radius:var(--radius);background:var(--panel);box-shadow:0 18px 44px rgba(15,39,66,.14);display:grid;gap:16px}
.local__h2{font-size:clamp(26px,2.8vw,38px)}
.local__nome{display:flex;align-items:center;gap:10px;font-size:clamp(18px,1.5vw,22px)}
.ico--pin{width:24px;height:24px;color:var(--blue);flex:none}
.local__end a{color:var(--blue);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;font-size:17px}
.local__end a:hover{color:var(--text-primary)}
.postal--local{position:relative;z-index:0;width:100%;max-width:360px;justify-self:end;margin:-56px 6% 0 0}
@media (max-width:860px){
  .map__node--local{top:-6px}
  .map__node--local .map__label{left:auto;right:22px}
  .postal--local{max-width:300px;margin:-40px 0 0 0}
}

/* ---------- 08. Chamada final + formulário ---------- */
.final__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.final__texto{display:grid;gap:22px;position:sticky;top:calc(var(--nav-h) + 24px)}
/* A chegada da rota: na seção 08 a linha condutora não desce pela margem; ela entra pelo topo da seção
   (conector horizontal até o x do cartão, largura medida pelo JS), desce até o cartão e termina no nó sobre a borda dele. */
.final .spine{display:none}
.final .sec__num{top:0;margin-top:-16px}
.final__cartao{position:relative}
.final__cartao::before{content:"";position:absolute;left:26.5px;bottom:100%;width:3px;height:var(--sec-pad);pointer-events:none;background-image:radial-gradient(circle,var(--accent) 1.5px,transparent 2px);background-size:3px 10px;opacity:.9}
.final__cartao::after{content:"";position:absolute;right:calc(100% - 28px);top:calc(-1 * var(--sec-pad) - 1.5px);width:var(--link-w,0px);height:3px;pointer-events:none;background-image:radial-gradient(circle,var(--accent) 1.5px,transparent 2px);background-size:10px 3px;opacity:.9}
.final__no{position:absolute;left:14px;top:-14px;z-index:2;width:28px;height:28px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--canvas-deep);pointer-events:none}
.final__no::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid var(--accent);opacity:0}
.final.live .final__no::after{animation:ring-pulse 4s var(--ease-out) infinite;animation-delay:-1.6s}
.form,.form__sucesso{position:relative;padding:clamp(24px,3vw,40px);border-radius:var(--radius);background:var(--panel);color:var(--text-primary);box-shadow:0 24px 60px rgba(5,12,24,.4);display:grid;gap:18px}
.form__resumo{padding:12px 16px;border-radius:10px;background:#FBE9E7;color:var(--erro);font-weight:600;font-size:15px}
.field{display:grid;gap:6px}
.field__label{font-weight:600;font-size:15px}
/* Campo: nunca branco puro; borda com 3,5:1 (componente de interface); placeholder 4,9:1 */
.field__input{
  width:100%;min-height:50px;padding:12px 14px;border-radius:10px;
  border:1.5px solid rgba(28,42,58,.55);background:#FDFCF9;color:var(--text-primary);font:inherit;font-size:16px;
  transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.field__input::placeholder{color:#627080}
.field__input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,75,120,.25)}
.field__input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.field__input[aria-invalid="true"]{border-color:var(--erro);box-shadow:0 0 0 3px rgba(180,35,24,.15)}
.field__msg{display:none;color:var(--erro);font-size:14px;font-weight:600}
.field__msg:not(:empty){display:block}
.field--check{grid-template-columns:auto 1fr;align-items:start;gap:6px 12px}
.field__check{width:22px;height:22px;margin:3px 0 0;accent-color:var(--accent);flex:none}
.field__label--check{font-weight:400;font-size:15px;line-height:1.5}
.field__label--check a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.field--check .field__msg{grid-column:1 / -1}
.form__enviar{margin-top:6px}
.form__sucesso{text-align:center;justify-items:center;gap:14px}
.form__sucesso-ico{width:64px;height:64px;color:var(--blue)}
.form__sucesso-h3{font-size:clamp(24px,2.4vw,34px);color:var(--blue)}
.form__sucesso p{max-width:44ch;color:var(--text-secondary)}
@media (max-width:860px){
  .final__grid{grid-template-columns:1fr}
  .final__texto{position:static}
  .final__cartao::before,.final__cartao::after{display:none}
}

/* ---------- 09. WhatsApp ---------- */
.whats__inner{display:grid;justify-items:center;gap:28px;text-align:center}
@media (max-width:520px){.btn--wa{width:100%;text-align:center}}

/* ---------- 10. Rodapé ---------- */
.rodape{position:relative;padding:clamp(64px,8vw,120px) 0 48px;background:var(--canvas-deep);color:var(--text-on-deep);overflow:hidden;--dotc:var(--dot)}
.rodape .container{position:relative;z-index:1;display:grid;justify-items:center;gap:26px;text-align:center}
.postal--rodape{width:100%;max-width:820px;margin-bottom:28px}
.postal--rodape .postal__img{aspect-ratio:21/9}
.rodape__triade{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3vw,40px);line-height:1.15;max-width:24ch}
.rodape__assinatura{color:var(--text-on-deep);opacity:.8;font-size:14px}
.rodape__links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px}
.rodape__link{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent-muted);transition:color .3s var(--ease-out)}
.rodape__link:hover{text-decoration-color:var(--accent)}
.rodape__link .ico{width:20px;height:20px}
/* Política de Privacidade: texto miúdo e discreto no fim da página (pedido da cliente).
   Cor de baixo contraste de propósito; o visitante que quiser ler pode selecionar ou dar zoom. */
.politica{width:100%;max-width:880px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(243,239,230,.1);text-align:left;display:grid;gap:8px;outline-offset:8px}
.politica__h2{font-family:var(--font-text);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,239,230,.42)}
.politica p{font-size:11px;line-height:1.55;color:rgba(243,239,230,.38)}
.politica:focus-visible,.politica:target{outline:none}
.politica:target p,.politica:target .politica__h2{color:rgba(243,239,230,.7)}

/* ============================================================
   Estados finais: movimento reduzido (CSS) e fixação ao vivo (body.pinned, JS)
   Só os elementos coreografados; nunca um transform:none geral.
   ============================================================ */
body.pinned *,body.pinned *::before,body.pinned *::after{animation:none!important;transition:none!important;transition-delay:0s!important}
body.pinned [data-enter] .part,body.pinned .spine__line,body.pinned .sec__num,body.pinned .prog__linha,body.pinned .rota-card{opacity:1;transform:none}
body.pinned .carimbo{transform:rotate(-6deg)}
body.pinned .sec__num{transform:scale(1)}
body.pinned [data-enter] .postal.part{transform:rotate(var(--rot,-2deg))}
body.pinned .rotas .map__arc{--draw:1}
body.pinned .hold__fill{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  [data-enter] .part,.spine__line,.prog__linha,.rota-card{opacity:1;transform:none}
  [data-enter] .postal.part{transform:rotate(var(--rot,-2deg))}
  .carimbo{transform:rotate(-6deg)}
  .sec__num{transform:scale(1)}
  .rotas .map__arc{--draw:1}
  .hold__fill{stroke-dashoffset:0}
  .map__ring,.sec__num::after,.rotas .map__node--hold::after,.final__no::after{opacity:0}
}
/* Aba escondida: pausa toda animação (inclusive pseudo-elementos) */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ============================================================
   Celular: selo vira barra fina, nav sem botão
   ============================================================ */
@media (max-width:720px){
  /* Selo com 40px de alvo de toque; a linha condutora volta para o meio da margem (gutter/2) */
  :root{--selo-h:40px;--spine-x:calc(var(--gutter) / 2)}
  html{scroll-padding-top:calc(var(--selo-h) + 8px)}
  body{padding-top:var(--selo-h)}
  .selo{top:0;left:0;right:0;transform:none;min-height:var(--selo-h);height:var(--selo-h);padding:0 12px;border-radius:0;font-size:12px;box-shadow:none}
  .selo--cta{font-size:13px;animation:none}
  .nav{position:absolute;top:var(--selo-h);height:60px;background:linear-gradient(180deg,rgba(15,39,66,.9),rgba(15,39,66,0));-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav__cta{display:none}
  .nav__logo,.nav__logo--hanur{height:32px}
  .nav__logo--somada{padding:0 8px}
  .nav__logo--somada img{height:24px}
  .nav__logos{gap:12px;padding:5px 10px;border-radius:10px}
  .nav__logos::before{height:22px}
  .nav__logo--hanur-sf{height:30px}
  .nav__logo--somada-sf{height:24px}
  .sec__num{width:28px;height:28px;margin-left:-14px;font-size:12px}
  .final .sec__num{margin-top:-14px}
  .wa-float{right:14px;bottom:14px}
}