:root{--paper:#fff;--ink:#151515;--lime:#e31c24;--coral:#bd101a;--line:#dedede;--muted:#666;--gutter:clamp(22px,5.2vw,88px)}
@media(max-width:760px){main{overflow-x:clip}}
::selection{background:#e31c24;color:#fff}
.button-dark:hover{background:#a90f17}
.about-section{background:#f6f6f6}
.reel-shell{background:radial-gradient(ellipse at 50% 44%,#fff 0,#fff 53%,#f0f0f0 100%)}
.flipbook-frames span.past{background:#e31c2433}
.process-grid article:hover{background:#e31c2410}
.paper-tape{background:#e31c24bb;border-color:#bd101a77}
.about-tags span{border-color:#d0d0d0}
.hero-image-frame{background:#e31c24}
.hero-image-frame.mascot-action{padding:0;border:0;text-align:left;cursor:pointer;overflow:visible;background:transparent;filter:drop-shadow(11px 15px 0 var(--ink))}
.hero-image-frame.mascot-action img{width:100%;height:100%;object-fit:contain;object-position:center;transform:scale(1.1);mix-blend-mode:normal;animation:mascot-float 5s ease-in-out infinite;transition:transform .35s}
.hero-image-frame.mascot-action:hover img{transform:scale(1.14) rotate(-2deg)}
.mascot-stamp{position:absolute;z-index:2;left:5%;bottom:8%;padding:9px 12px;background:#e31c24;color:#fff;border:1px solid #151515;box-shadow:3px 3px 0 #151515;font-size:8px;line-height:1.6;transform:rotate(-6deg);pointer-events:none}
.mascot-spark{position:absolute;right:3%;top:4%;color:#e31c24;font:clamp(35px,6vw,72px)/1 var(--body);text-shadow:2px 2px #fff;pointer-events:none;transition:transform .3s}
.hero-image-frame:hover .mascot-spark{transform:rotate(35deg) scale(1.2)}
.mascot-bubble{position:absolute;z-index:5;right:-6%;bottom:8%;max-width:195px;padding:11px 13px;background:#fff;color:#151515;border:1px solid #151515;box-shadow:4px 4px 0 #e31c24;font-size:8px;line-height:1.6;transform:rotate(4deg);transition:transform .25s,background .25s}
.hero-art.mascot-reacting .mascot-bubble{transform:rotate(-3deg) scale(1.08);background:#fff5f5}
.mascot-action{position:relative;display:grid;place-items:center;padding:0;border:0;background:transparent;isolation:isolate}
.mascot-action img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.mascot-action:focus-visible{outline:3px solid #e31c24;outline-offset:5px;border-radius:50%}
.mascot-about{position:absolute;z-index:4;top:2%;right:-5%;width:clamp(105px,16vw,185px);padding:5px;background:#fff;border:1px solid #151515;border-radius:50%;box-shadow:5px 6px 0 #e31c24;transform:rotate(8deg);transition:transform .25s,box-shadow .25s}
.mascot-about:hover{transform:rotate(0) scale(1.06);box-shadow:7px 8px 0 #e31c24}
.mascot-caption{position:absolute;right:-17px;bottom:6px;padding:6px 8px;background:#e31c24;color:#fff;border:1px solid #151515;font-size:7px;transform:rotate(-7deg);pointer-events:none}
.mascot-contact{flex:0 0 clamp(88px,12vw,150px);height:clamp(88px,12vw,150px);margin:0 2vw 0 auto;border-radius:50%;background:#fff;box-shadow:5px 5px 0 #151515;transition:transform .25s,box-shadow .25s}
.mascot-contact:hover{transform:rotate(-7deg) scale(1.06);box-shadow:8px 8px 0 #151515}
.mascot-contact .mascot-caption{right:-10px;bottom:-4px;background:#151515;border-color:#fff}
.mascot-action.is-popping{animation:mascot-hop .65s cubic-bezier(.2,1.8,.35,1)}
.mascot-action.is-popping::after{content:'♠';position:absolute;z-index:4;inset:-18%;display:grid;place-items:center;color:#e31c24;font:clamp(44px,8vw,96px)/1 var(--body);pointer-events:none;animation:mascot-burst .65s ease-out both}
.mascot-contact.is-popping::after{color:#fff}
.mascot-status{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
@keyframes mascot-hop{0%,100%{translate:0 0;rotate:0}27%{translate:0 -15px;rotate:-7deg}58%{translate:0 1px;rotate:5deg}78%{translate:0 -5px;rotate:-2deg}}
@keyframes mascot-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes mascot-burst{0%{opacity:0;scale:.25;rotate:-35deg}38%{opacity:1;scale:1.15;rotate:18deg}100%{opacity:0;scale:1.6;rotate:55deg}}
@media(max-width:760px){
  .flipbook-stage{width:100%;margin-left:0}
  .hero-image-frame.mascot-action{overflow:visible}
  .hero-image-frame.mascot-action img{transform:scale(1.06)}
  .mascot-bubble{right:-3%;bottom:3%;max-width:160px;font-size:7px}
  .mascot-stamp{left:2%;bottom:2%;font-size:7px}
  .mascot-about{right:-4%;top:-2%;width:clamp(96px,30vw,130px)}
  .contact-heading{position:relative}
  .contact-heading h2{max-width:calc(100% - 72px)}
  .mascot-contact{position:absolute;right:66px;top:4px;flex-basis:58px;width:58px;height:58px;margin:0}
  .mascot-contact .mascot-caption{font-size:6px}
}
@media(max-width:380px){.mascot-bubble{max-width:130px;right:-6%;font-size:6px}.contact-heading h2{max-width:calc(100% - 66px)}.mascot-contact{right:60px;top:2px;flex-basis:52px;width:52px;height:52px}}
body.reduce-motion .mascot-action.is-popping{animation:none}
body.reduce-motion .mascot-action.is-popping::after{animation:none;opacity:0}

/* === Ajustes: mascote do hero === */
/* .mascot-action (position:relative) anulava o posicionamento absoluto do quadro,
   e o clip-path inclinado + scale(1.1) cortavam as bordas do personagem. */
.hero-image-frame.mascot-action{position:absolute;inset:auto;top:2%;left:0;right:0;margin-inline:auto;height:86%;width:auto;max-width:100%;aspect-ratio:1;clip-path:none;box-shadow:none}
.hero-image-frame.mascot-action img{transform:none}
.hero-image-frame.mascot-action:hover img{transform:scale(1.04) rotate(-2deg)}
.mascot-bubble{right:16%;top:3%;bottom:auto}
@media(max-width:760px){
  .hero-image-frame.mascot-action{height:84%}
  .hero-image-frame.mascot-action img{transform:none}
  .mascot-bubble{right:2%;top:4%;bottom:auto}
}

/* === Ajustes: barra de navegação maior === */
.desktop-nav{gap:42px;font-size:15px}
.desktop-nav a{padding:14px 2px}
.desktop-nav sup{font-size:10px}
.index-link{font-size:12px;gap:18px;padding:12px 0}
.index-link span{font-size:30px}
@media(max-width:1050px){.desktop-nav{gap:26px;font-size:14px}}
.mobile-menu summary{font-size:13px;padding:14px 0}
.mobile-menu summary>span{font-size:24px}
.mobile-menu nav a{font-size:16px;padding:14px 12px}

/* === Fonte de títulos: Archivo Black (substitui Anton) === */
:root{--display:'Archivo Black','Arial Black',sans-serif}
h1{font-size:clamp(48px,6.6vw,108px);letter-spacing:-.04em;line-height:.98}

/* === Mascote grande na página do caderno (Sobre) === */
.mascot-paper{position:absolute;z-index:2;inset:4% 14%;filter:drop-shadow(8px 10px 0 rgba(21,21,21,.18));transition:transform .3s cubic-bezier(.2,1.5,.4,1)}
.mascot-paper img{animation:mascot-float 5s ease-in-out infinite}
.mascot-paper:hover{transform:rotate(-3deg) scale(1.04)}
.mascot-paper .mascot-caption{right:4%;bottom:6%;font-size:9px;padding:7px 10px}
.paper-drawing .draw-orbit{opacity:.5}
.paper-drawing .draw-dot{display:none}
.hero-image-frame .mascot-spark{display:none}
@media(max-width:760px){.about-copy h2{font-size:clamp(34px,10.5vw,60px)}}