/* Responsivo. Acima de 900px o hero escala com a largura (medidas da comp em --u).
   Até 900px ele vira uma composição própria, "a subida": a pintura retrato (com o médico C no patamar de cima) ocupa
   o palco abaixo da barra e o ciclo fica escrito nos espelhos dos degraus, como no desktop. Com script e movimento,
   o palco fica preso (sticky) e a câmera sobe a escada (landing.js); sem eles, é o quadro final estático. */

@media (max-width:1100px){
  .setup{gap:56px}
}

@media (max-width:900px){
  :root{--barra:calc(56px + env(safe-area-inset-top,0px));--palco:clamp(560px,calc(100svh - var(--barra)),1000px)}
  .frame{height:auto;overflow:visible}
  .hero{position:relative;inset:auto;display:block;height:var(--palco);overflow:clip;background:#CFE6F7;container-type:size}
  .hero__veu{display:block;position:absolute;inset:0;z-index:4;background:#0B1A3D;opacity:0;pointer-events:none}

  /* pintura e degraus: duas camadas com a mesma geometria (cobre o palco, ancorada embaixo à direita), que a câmera
     move juntas. Medidas em px da pintura 1086×1448 (--o = 1 px da pintura). */
  .hero-scene,.steps{position:absolute;left:auto;top:auto;right:0;bottom:0;width:auto;height:max(100cqh,calc(100cqw * 1448 / 1086));
    aspect-ratio:1086/1448;max-width:none;overflow:visible;transform-origin:0 0}
  .hero-scene .luz{display:none}
  .steps{--o:calc(100cqh / 1448);z-index:1;margin:0;padding:0;container-type:size;pointer-events:none}
  .step{left:max(calc(var(--x) * var(--o)),calc(100cqw - 100vw + 24px));top:calc(var(--y) * var(--o));margin-top:-.5em;
    font-size:max(calc(var(--n) * var(--o)),var(--min,0px));transform:rotate(var(--r))}
  .step__t{text-shadow:0 1px 0 rgba(255,255,255,.55)}
  /* espelhos medidos na pintura (aresta de cima/baixo por gradiente de luz): 1 é o degrau de baixo, 4 o de cima */
  .step--1{--x:130;--y:1113;--n:68;--r:3.8deg}
  .step--2{--x:345;--y:978;--n:64;--r:3.2deg}
  .step--3{--x:532;--y:864;--n:60;--r:1.4deg;--min:24px}
  .step--4{--x:742;--y:751;--n:50;--r:.4deg;--min:24px}   /* frase ≥ 12 px mesmo em tela baixa */

  /* título, subtítulo e CTA no céu da pintura */
  .hero-top{display:block;position:absolute;inset:0 0 auto;z-index:2;min-height:0;
    padding:28px max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));background:none}
  .headline{position:static;margin:0;padding:0;font-size:clamp(34px,9.2vw,52px);line-height:1.03;letter-spacing:-0.03em;white-space:normal;text-wrap:balance}
  .subline{position:static;margin:12px 0 0;padding:0;max-width:31ch;font-size:clamp(16px,4.2vw,19px);line-height:1.5;white-space:normal;text-wrap:balance;
    text-shadow:0 0 14px rgba(236,245,252,.92),0 0 3px rgba(236,245,252,.7)}
  .subline br,.headline br{display:none}
  .pill--hero{position:static;display:inline-flex;width:auto;height:48px;margin:20px 0 0;padding:0 22px;gap:12px;font-size:16px!important}
  .pill--hero svg{width:20px;height:20px}
  .so-largo,.hero__mais{display:none}
  .hero__nota{position:static;width:fit-content;max-width:272px;margin:10px 0 0;padding:6px 11px;border-radius:12px;background:rgba(251,250,247,.9);box-shadow:0 0 0 1px rgba(198,154,75,.32);
    font-size:13px;line-height:1.3;white-space:normal;text-shadow:none}
  .doctor,.doctor-shadow{display:none}


  /* com movimento: pista de rolagem; o palco fica preso abaixo da barra e a folha do bloco 2 sobe por cima dele */
  html.subida .frame{height:calc(var(--palco) + 230svh)}
  html.subida .hero{position:sticky;top:var(--barra)}
  html.subida .gov{margin-top:calc(var(--palco) * -1)}
  #governanca{scroll-margin-top:-8px}

  .setup{grid-template-columns:minmax(0,1fr);gap:36px;width:calc(100% - 40px);padding:96px 0}
  .setup__list div{grid-template-columns:minmax(0,1fr);gap:4px}

  .close{padding:88px 0 280px}
  .close__inner{width:calc(100% - 40px)}
  .close__doctor{width:220px;right:20px}

  .foot__inner{grid-template-columns:minmax(0,1fr);width:calc(100% - 40px);gap:18px}
}

/* Convite à subida: se a pessoa não rolar, uma cápsula no idioma das setas do bloco 2 (círculo navy com anel dourado
   + marfim com filete e itálico) surge no pé da escada, e o "1" do primeiro degrau acende de leve. Some ao rolar. */
.subida__convite{display:none}
@media (max-width:900px){
  html.subida .subida__convite{display:flex;position:absolute;z-index:3;left:50%;bottom:max(26px,env(safe-area-inset-bottom,0px));margin:0;
    align-items:center;transform:translate(-50%,10px);opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
  html.subida .hero.is-convite .subida__convite{opacity:1;transform:translate(-50%,0)}
  .subida__seta{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#1D3A6E 0%,#0F2753 55%,#0A1C40 100%);color:#fff;
    box-shadow:0 0 0 1.5px #D8B565,0 0 0 2.5px rgba(126,88,24,.55),inset 0 1px 0 rgba(255,255,255,.18),0 6px 14px -6px rgba(11,26,61,.55)}
  .subida__seta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:convite-sobe 1.8s cubic-bezier(.4,0,.2,1) infinite}
  .subida__rot{margin-left:-9px;height:28px;display:flex;align-items:center;padding:0 16px 0 18px;border-radius:999px;white-space:nowrap;
    font:italic 400 14px/1 var(--serif);color:#13233F;letter-spacing:.005em;
    background:linear-gradient(180deg,#FDFBF5 0%,#F6F0E2 100%) padding-box,linear-gradient(180deg,#E7CB86 0%,#B98A33 55%,#8F6420 100%) border-box;
    border:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 18px -10px rgba(11,26,61,.45)}
  html.subida .hero.is-convite .step--1 .step__n{animation:convite-degrau 2.4s ease-in-out infinite}
}
@keyframes convite-sobe{0%,100%{transform:translateY(2px);opacity:.75}45%{transform:translateY(-3px);opacity:1}}
@keyframes convite-degrau{0%,100%{text-shadow:none}50%{text-shadow:0 0 .22em rgba(246,196,104,.85),0 0 .6em rgba(240,186,90,.4)}}