/* Herói do Enamed: "O Enamed mostra o resultado. Campus mostra o caminho." A palavra Campus é a marca gravada da dobra,
   e os dois cadernos, em alusão ao caderno da prova, são o convite: tocar abre o Mapa Enamed da turma (caderno.js).
   Desktop em --u, sobre a pintura de sempre. Até 900px, composição própria: pintura em cima, texto no mármore. */
.h__a,.h__b,.h__c{display:block;white-space:nowrap}
.h__c img{display:block;width:100%;height:auto}
.so-cel,.cena-cel{display:none}
.headline{left:calc(72 * var(--u));top:calc(112 * var(--u));width:calc(690 * var(--u));font:400 calc(54.3 * var(--u))/1.04 var(--serif);letter-spacing:-.025em;white-space:normal}
.h__c{margin:calc(-16 * var(--u)) 0 calc(2 * var(--u)) calc(-3 * var(--u))}
.h__b{font-size:calc(88.4 * var(--u));line-height:1;letter-spacing:-.03em}
.subline{left:calc(74 * var(--u));top:calc(456 * var(--u));font:400 calc(20 * var(--u))/1.4 var(--sans);text-shadow:0 0 12px rgba(236,245,252,.95);white-space:nowrap}
.pill--hero{left:calc(72 * var(--u));top:calc(526 * var(--u));width:calc(372 * var(--u));box-shadow:0 0 0 1px rgba(216,181,101,.75),0 calc(12 * var(--u)) calc(24 * var(--u)) calc(-14 * var(--u)) rgba(11,39,71,.6)}

/* Cadernos: em pé no piso, apoiados no espelho do degrau, na perspectiva medida da pintura. Posições geradas por
   scripts/campus_art/heroi_cadernos.py: cada recorte já traz a sombra projetada para longe do sol e o contato com a pedra. */
.cad-b,.cad-dica{position:absolute}
.cad-b[hidden],.cad-dica[hidden]{display:none}
.cad-b{z-index:3;display:block;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cad-b img{display:block;width:100%;height:auto;pointer-events:none}
.cad-b:focus-visible{outline:2px solid var(--navy);outline-offset:-22px;border-radius:6px}
.cad-b--marrom{left:calc(50% + 57.6 * var(--u));top:calc(427.7 * var(--u));width:calc(453.5 * var(--u))}
.cad-b--roxo{left:calc(50% + 312.0 * var(--u));top:calc(364.3 * var(--u));width:calc(412.5 * var(--u))}
.cad-dobra{position:absolute;aspect-ratio:1;pointer-events:none}
.cad-b--marrom .cad-dobra{left:48.55%;top:16.43%;width:14.95%}
.cad-b--roxo .cad-dobra{left:46.32%;top:18.95%;width:13.35%}
.cad-folhas{display:none}
.cad-dica{z-index:4;left:calc(50% + 160.3 * var(--u));top:calc(466.1 * var(--u));margin:0;padding:calc(7 * var(--u)) calc(14 * var(--u));border:0;border-radius:999px;background:#FBF6EA;box-shadow:0 0 0 1px rgba(198,154,75,.6),0 calc(8 * var(--u)) calc(16 * var(--u)) calc(-8 * var(--u)) rgba(11,26,61,.5);
  font:600 max(12px,calc(13.5 * var(--u)))/1.2 var(--sans);color:var(--navy);cursor:pointer;white-space:nowrap}
.cad-dica:hover{background:#F3D892}
.cad-dica:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.motion .cad-b{animation:cad-chega .9s cubic-bezier(.16,1,.3,1) .3s backwards}
.motion .cad-b--roxo{animation-delay:.55s}
.motion .cad-dica{animation:cad-chega .6s cubic-bezier(.16,1,.3,1) 1.1s backwards}
@keyframes cad-chega{from{opacity:0;clip-path:inset(0 0 12% 0)}}

@media (min-width:901px){.subline br{display:inline}}
/* Como no desktop, o herói fica preso e o bloco 2 sobe por cima como folha. --frame-h vem do landing.js: o herói pode ser mais alto que a tela */
@media (max-width:900px){
  .frame{position:sticky;top:min(var(--barra),calc(100svh - var(--frame-h,100svh)))}
}
@media (max-width:900px){
  /* A pintura ocupa a largura; o texto começa onde o mármore livre começa (y 958 da pintura), por isso nunca toca os
     cadernos. Em tela baixa --crop corta só o céu, até deixar o botão na dobra. */
  :root{--crop:min(34vw,max(0px,calc(182.3vw + 135px - 100svh)))}
  .so-cel{display:inline}
  .hero{height:auto;padding-top:calc(112.3vw - var(--crop));background:#F4EDE6;container-type:normal}
  .hero-scene,.doctor,.doctor-shadow{display:none}
  .cena-cel{display:block;position:absolute;left:0;top:calc(var(--crop) * -1);width:100vw;height:auto;max-width:none}
  .hero-top{position:relative;z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:stretch;width:min(100%,520px);margin:0 auto;
    padding:0 max(22px,env(safe-area-inset-right,0px)) 18px max(22px,env(safe-area-inset-left,0px))}
  .headline{position:static;width:auto;padding:0;font-size:min(10.2vw,48px);line-height:1.04;letter-spacing:-.025em;text-wrap:initial}
  .headline br{display:inline}
  .h__c{margin:-.2em 0 -.06em -.03em}
  .h__b{font-size:min(11.4vw,56px);line-height:1.02}
  .subline{position:static;max-width:none;margin:8px 0 0;font-size:min(4.2vw,18px);line-height:1.42;white-space:normal;text-shadow:none;text-wrap:pretty}
  .subline br{display:none}
  .pill--hero{position:static;pointer-events:auto;display:flex;width:100%;height:52px;margin:12px 0 0;padding:0 18px;gap:12px;font-size:min(4.4vw,18px)!important}
  .pill--hero svg{width:20px;height:20px}
  .cad-b--marrom{left:calc(7.97 * 1vw);top:calc(66.71 * 1vw - var(--crop));width:54.75vw}
  .cad-b--roxo{left:calc(28.14 * 1vw);top:calc(73.51 * 1vw - var(--crop));width:50.88vw}
  .cad-b--marrom .cad-dobra{left:48.49%;top:17.99%;width:14.25%}
  .cad-b--roxo .cad-dobra{left:47.17%;top:20.99%;width:12.57%}
  .cad-folhas{display:block;position:absolute;z-index:3;left:calc(7.03 * 1vw);top:calc(90.97 * 1vw - var(--crop));width:23.68vw;height:auto;max-width:none;pointer-events:none}
  .cad-dica{left:18.52vw;top:calc(69.87vw - var(--crop));padding:6px 11px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .cad-b,.cad-dica{animation:none!important}
}