@font-face{font-family:"Jost";src:url(fonts/jost-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(fonts/barlow-semi-condensed-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(fonts/barlow-semi-condensed-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --paper:#ECEEEF;      /* o papel frio medido nos quadros renderizados */
  --ink:#141518;
  --pencil:#585A5E;
  --hair:#14151840;
  --rev:#B92C1C;        /* vermelho de revisão: posição atual, erro e foco */
  --m:14px;             /* margem da prancha */
  --line:var(--ink);
  --display:"Jost",system-ui,sans-serif;
  --tech:"Barlow SC","Arial Narrow",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--ink) var(--paper);scrollbar-width:thin;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--display)}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--rev);outline-offset:3px}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
img{display:block;width:100%;height:auto}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}

.skip{position:fixed;left:calc(var(--m) + 8px);top:calc(var(--m) + 8px);z-index:60;background:var(--ink);color:var(--paper);padding:.5rem .8rem;transform:translateY(-300%)}
.skip:focus{transform:none}

/* ---- margem da prancha ---- */
.sheet{position:fixed;inset:var(--m);z-index:40;pointer-events:none;border:1px solid var(--line);transition:border-color .5s;color:var(--line)}
.sheet__fold{position:absolute;top:-1px;width:1px;height:10px;background:currentColor}
.sheet__ref{position:absolute;top:2px;transform:translateX(-50%);font:500 .6875rem/1 var(--tech);letter-spacing:.06em}
body.on-photo{--line:#ECEEEF}

/* ---- selo ---- */
.selo{position:fixed;z-index:50;right:var(--m);bottom:var(--m);width:min(21.5rem,calc(100vw - 2*var(--m)));background:var(--paper);border:1px solid var(--ink);display:grid;grid-template-columns:1fr auto;font:400 .875rem/1.25 var(--tech)}
.selo>*{border-bottom:1px solid var(--ink)}
.selo__name{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.7rem .8rem;text-decoration:none}
.selo__name strong{font:500 1.28rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.selo__name span{color:var(--pencil)}
.selo__data{grid-column:1/-1;display:grid;grid-template-columns:1fr auto}
.selo__data>div{padding:.42rem .8rem}
.selo__sheet{border-left:1px solid var(--ink);font-variant-numeric:tabular-nums}
.selo dt{color:var(--pencil);font-size:.75rem;letter-spacing:.04em}
.selo dd{font-weight:500}
.selo__mini{display:none;font-variant-numeric:tabular-nums;font-weight:500}
.selo__toggle{display:none;grid-column:2;grid-row:1;padding:0 .8rem;gap:0;background:none;color:inherit;border:0;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);font:500 .875rem/1 var(--tech)}
.selo__toggle[aria-expanded=true]{background:var(--ink);color:var(--paper)}
.selo__menu{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}
.selo__menu li+li{border-left:1px solid var(--ink)}
.selo__menu a{display:block;padding:.55rem .8rem;text-decoration:none;transition:background .2s,color .2s}
.selo__menu a:hover{background:var(--ink);color:var(--paper)}
.selo__cta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .8rem;background:var(--ink);color:var(--paper);font-weight:500;font-size:1rem;text-decoration:none;border-bottom:0}
.selo__cta svg{transition:transform .5s var(--ease)}
.selo__cta:hover svg{transform:translateX(5px)}
.selo__scale{grid-column:1/-1;height:7px;border:0;position:relative;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 10%)}
.selo__scale i{position:absolute;left:0;top:2px;bottom:0;width:100%;background:var(--rev);transform-origin:left;transform:scaleX(var(--p,0))}

/* depois da sequência o selo se recolhe para não cobrir o texto; abre ao passar o mouse ou com o teclado */
.past-seq .selo:not(:hover):not(:focus-within):not(.is-open) :is(.selo__data,.selo__menu){display:none}
.past-seq .selo:not(:hover):not(:focus-within):not(.is-open) .selo__role{display:none}
.past-seq .selo:not(:hover):not(:focus-within):not(.is-open) .selo__mini{display:inline}
/* em telas de toque o selo abre pelo botão */
@media (hover:none){
  .selo__toggle{display:block}
  .selo__name{grid-column:1}
  .past-seq .selo:not(.is-open) :is(.selo__data,.selo__menu){display:none}
  .past-seq .selo:not(.is-open) .selo__role{display:none}
  .past-seq .selo:not(.is-open) .selo__mini{display:inline}
  .selo.is-open :is(.selo__data,.selo__menu){display:grid}
}

/* ---- sequência ---- */
.seq{height:760vh;position:relative}
.seq__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
.seq canvas,.seq__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seq__poster{transition:opacity .2s}
.seq__stage.is-live .seq__poster{opacity:0}

.note{position:absolute;left:var(--m);top:var(--m);width:min(23rem,calc(100vw - 2*var(--m)));padding:1.15rem 1.2rem 1.25rem;background:var(--paper);border:1px solid var(--ink);visibility:hidden;clip-path:inset(0 100% 0 0)}
.note.is-on{visibility:visible;clip-path:inset(0);transition:clip-path .7s var(--ease)}
.note h1,.note h2{font:300 clamp(1.75rem,2.7vw,2.5rem)/1.08 var(--display);letter-spacing:-.012em;text-wrap:balance}
.note p{margin-top:.7rem;color:var(--pencil);font-size:1rem;line-height:1.45;text-wrap:pretty}
.note .note__hint{display:flex;align-items:center;justify-content:space-between;margin-top:.9rem;padding-top:.65rem;border-top:1px solid var(--hair);font:500 .875rem/1 var(--tech);color:var(--ink)}
.note__hint svg{animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateY(4px)}}

/* ---- folhas seguintes ---- */
.folha{position:relative;padding:clamp(5rem,11vw,10rem) clamp(2rem,6vw,6rem)}
.folha+.folha::before{content:"";position:absolute;top:0;left:var(--m);right:var(--m);height:1px;background:var(--ink)}
.display{font:300 clamp(2.4rem,5.4vw,5.25rem)/1.03 var(--display);letter-spacing:-.022em;text-wrap:balance}
.tag{font:500 .875rem/1.3 var(--tech);color:var(--pencil)}
.tag::before{content:"";display:inline-block;width:1.4em;height:1px;margin-right:.5em;vertical-align:.3em;background:currentColor}

.processo{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;row-gap:4rem;align-items:start}
.processo__head{grid-column:1/8}
.processo__head .tag{margin-top:.9rem}
.legend{grid-column:6/-1;counter-reset:f;border-top:1px solid var(--ink)}
.legend li{counter-increment:f;display:grid;grid-template-columns:3.2rem 9rem 1fr;gap:1rem;padding:1.1rem 0 1.25rem;border-bottom:1px solid var(--hair);align-items:baseline}
.legend li::before{content:counter(f,decimal-leading-zero);font:500 .875rem/1 var(--tech);font-variant-numeric:tabular-nums;color:var(--pencil)}
.legend h3{font:400 1.45rem/1.1 var(--display)}
.legend p{color:var(--pencil);max-width:46ch}

.casa{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;row-gap:clamp(2rem,4vw,3.5rem);padding-left:0;padding-right:0;padding-bottom:clamp(6rem,10vw,9rem)}
.casa__head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;padding:0 clamp(2rem,6vw,6rem);align-items:end}
.casa__head .display{grid-column:1/7}
.casa__head .tag{grid-column:1/7;margin-top:.8rem}
.casa__lead{grid-column:7/-1;grid-row:1/3;max-width:50ch;align-self:end;font-size:1.2rem;line-height:1.45}
.casa figcaption{margin-top:.5rem;font:400 .875rem/1.3 var(--tech);color:var(--pencil)}
.casa__a{grid-column:1/-1}
.casa__b{grid-column:2/7}
.casa__c{grid-column:7/-1;margin-top:clamp(2rem,7vw,7rem);padding-right:clamp(2rem,6vw,6rem)}
.casa__d{grid-column:1/9;padding-left:clamp(2rem,6vw,6rem)}
.ficha{grid-column:9/-1;align-self:end;margin-right:clamp(2rem,6vw,6rem);border-collapse:collapse;font:400 .9375rem/1.3 var(--tech);font-variant-numeric:tabular-nums;border-top:1px solid var(--ink)}
.ficha caption{text-align:left;font-weight:500;padding-bottom:.6rem}
.ficha th{text-align:left;font-weight:400;color:var(--pencil);padding:.5rem 1rem .5rem 0;border-bottom:1px solid var(--hair);white-space:nowrap}
.ficha td{padding:.5rem 0;border-bottom:1px solid var(--hair);font-weight:500}

.tiago{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;row-gap:2.5rem}
.tiago .display{grid-column:1/10}
.tiago__text{grid-column:7/-1}
.tiago__text p:first-child{font-size:1.2rem;line-height:1.5;max-width:50ch}
.tiago__text .tag{margin-top:1rem}
.ficha--open{margin:2.5rem 0 0;width:100%}

.contato{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5rem;row-gap:3rem;padding-bottom:clamp(12rem,18vw,16rem)}
.contato .display{grid-column:1/7}
.form{grid-column:7/-1;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.5rem;align-content:start;padding-right:0}
.field{border:0;margin:0;padding:0;min-width:0}
.field--wide,fieldset.field{grid-column:1/-1}
.field label,.field legend{display:block;padding:0;font:500 .9375rem/1.3 var(--tech)}
.field input:not([type=radio]),.field textarea{display:block;width:100%;margin-top:.25rem;padding:.45rem 0 .55rem;background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;color:inherit;font:400 1.0625rem/1.4 var(--display);caret-color:var(--rev);resize:vertical}
.field input:not([type=radio]):focus,.field textarea:focus{outline:0;border-bottom:2px solid var(--rev);padding-bottom:calc(.55rem - 1px)}
.field [aria-invalid=true]{border-bottom-color:var(--rev)!important}
.field__err{margin-top:.35rem;font:500 .875rem/1.3 var(--tech);color:var(--rev)}
.choice{display:flex;margin-top:.5rem;border:1px solid var(--ink);width:fit-content;max-width:100%}
.choice label{font-weight:400;cursor:pointer}
.choice label+label{border-left:1px solid var(--ink)}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:block;padding:.7rem .95rem;transition:background .2s,color .2s}
.choice label:hover span{background:#14151814}
.choice input:checked+span{background:var(--ink);color:var(--paper)}
.choice input:focus-visible+span{outline:2px solid var(--rev);outline-offset:2px}
.form__end{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
button{display:inline-flex;align-items:center;gap:1.4rem;padding:.8rem 1.1rem;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:0;font:500 1rem/1 var(--tech);cursor:pointer}
button svg{transition:transform .5s var(--ease)}
button:hover svg{transform:translateX(5px)}
.form__status{font:500 .9375rem/1.35 var(--tech);max-width:38ch}
.rodape{grid-column:1/7;color:var(--pencil);font:400 .875rem/1.35 var(--tech)}

/* ---- telas estreitas ---- */
@media (max-width:860px){
  :root{--m:8px}
  body{font-size:1rem}
  .sheet__ref{display:none}
  .selo{width:calc(100vw - 2*var(--m));grid-template-columns:1fr auto auto;font-size:.8125rem}
  .selo__name{grid-column:1;padding:.5rem .6rem;border-right:1px solid var(--ink)}
  .selo__name strong{font-size:.95rem;letter-spacing:.1em}
  .selo__role{display:none}
  .selo__toggle{display:block;grid-column:3;min-height:44px;padding:0 .75rem;border-left:1px solid var(--ink)}
  .selo__data{grid-column:2;grid-row:1;display:block}
  .selo__draw{display:none}
  .past-seq .selo .selo__mini,.selo__mini{display:none!important}
  .past-seq .selo .selo__data,.selo.is-open .selo__data{display:block!important}
  .past-seq .selo:not(:hover):not(:focus-within):not(.is-open) .selo__data{display:block!important}
  .selo__data>div{padding:.3rem .6rem}
  .selo__sheet{border-left:0}
  .selo dt{display:none}
  .selo dd{line-height:2}
  .selo__menu{display:none;order:5}
  .selo.is-open .selo__menu{display:grid!important}
  .selo__menu a{min-height:44px;display:flex;align-items:center;padding:0 .6rem}
  .selo__cta{min-height:44px;padding:.55rem .6rem;font-size:.9375rem}
  .note{width:calc(100vw - 2*var(--m));padding:.8rem .85rem .9rem}
  .note h1,.note h2{font-size:1.65rem}
  .note p{font-size:.9375rem;margin-top:.45rem}
  .note .note__hint{margin-top:.6rem;padding-top:.5rem}
  .note__hint svg{height:20px}
  .folha{padding:4.5rem 1.4rem}
  .processo,.casa,.casa__head,.tiago,.contato{display:block}
  .form button{min-height:44px}
  .legend{margin-top:2.5rem}
  .legend li{grid-template-columns:2.2rem 1fr;row-gap:.3rem}
  .legend p{grid-column:2}
  .casa{padding-left:0;padding-right:0}
  .casa__head{padding:0 1.4rem}
  .casa__lead{margin-top:1.3rem;font-size:1.0625rem}
  .casa figure{margin-top:1.8rem;padding:0}
  .casa figcaption{padding:0 1.4rem}
  .casa__b,.casa__c,.casa__d{padding:0}
  .ficha{margin:2.5rem 1.4rem 0;width:calc(100% - 2.8rem)}
  .ficha th{white-space:normal}
  .tiago__text{margin-top:1.8rem}
  .form{margin-top:2.5rem;grid-template-columns:1fr}
  .contato{padding-bottom:9rem}
  .rodape{margin-top:3rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .note,.note.is-on{transition:none;clip-path:none}
  .note__hint svg{animation:none}
  .selo__cta svg,button svg{transition:none}
}