@font-face{font-family:"Fraunces";font-weight:300;font-style:normal;font-display:swap;src:url(assets/fonts/fraunces-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-weight:300;font-style:italic;font-display:swap;src:url(assets/fonts/fraunces-latin-300-italic.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/fraunces-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-weight:400;font-style:italic;font-display:swap;src:url(assets/fonts/fraunces-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-weight:500;font-style:normal;font-display:swap;src:url(assets/fonts/fraunces-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-style:normal;font-display:swap;src:url(assets/fonts/InstrumentSans-variable.woff2) format("woff2")}

/* Direção: calma e precisão. Três cores: papel creme (o da foto da Érica), ameixa (tinta e blocos escuros) e o magenta do blazer.
   Uma ideia por tela. Assinatura: o sublinhado duplo do fechamento de contas num razão contábil, que se desenha sob "em ordem." */
:root{
  --papel:#fbf4ea; --tinta:#2b0f1f; --magenta:#b30d47;
  --muda:rgba(43,15,31,.74); --muda-claro:rgba(251,244,234,.76);
  --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --gut:max(24px,env(safe-area-inset-left,0px)); --gutr:max(24px,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.0625rem/1.55 var(--sans);overflow-x:hidden;font-variant-numeric:lining-nums}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2{font-family:var(--serif);font-weight:300;margin:0;text-wrap:balance;line-height:.96;letter-spacing:-.03em}
em{font-style:italic}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:4px}
.trabalho :focus-visible,.prova :focus-visible,.rodape :focus-visible,.fecho :focus-visible{outline-color:var(--papel)}
::selection{background:var(--magenta);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* marca: só o nome, serifa */
.logo{font:500 1.3rem/1 var(--serif);letter-spacing:.005em;color:var(--tinta)}
.brand-lock{display:inline-flex;align-items:center}
.marca{display:inline-flex;align-items:center;min-height:48px;text-decoration:none}
.topo{position:absolute;inset:0 0 auto 0;z-index:5;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gutr) 10px var(--gut)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border-radius:999px;background:var(--magenta);color:#fff;font:600 1.0625rem/1 var(--sans);text-decoration:none;transition:transform .25s var(--ease),background-color .25s}
.btn:hover{background:#8f0a39;transform:translateY(-2px)}
.btn:active{transform:translateY(0);background:#7a0833}
.btn-grande{min-height:64px;padding:0 34px;font-size:1.1875rem}
.btn-claro{background:var(--papel);color:var(--tinta)}
.btn-claro:hover{background:#fff}
.btn svg{flex:none}
.pula{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--tinta);color:#fff;padding:12px 18px;border-radius:8px;text-decoration:none}
.pula:focus{left:12px}

/* revelação por linha: a máscara .ln corta o texto que sobe de baixo */
.ln{display:block;overflow:hidden;padding:0 .06em .14em;margin:0 -.06em -.14em}
.ln > span{display:block}

/* TELA 1: abertura em 100svh */
.abertura{position:relative;min-height:100svh;min-height:100vh;display:flex;flex-direction:column;background:var(--papel);overflow:hidden}
@supports (height:100svh){.abertura{min-height:100svh}}
.ab-txt{position:relative;z-index:2;padding:calc(76px + env(safe-area-inset-top,0px)) var(--gutr) 0 var(--gut)}
.abertura h1{font-size:clamp(3.4rem,20.4vw,6rem);line-height:.92;letter-spacing:-.03em}
.dupla{font-style:italic;display:inline-block;padding-bottom:.1em;
  background-image:linear-gradient(var(--magenta),var(--magenta)),linear-gradient(var(--magenta),var(--magenta));
  background-repeat:no-repeat;background-position:0 calc(100% - 5px),0 100%;background-size:100% 2px,100% 2px}
.lede{margin-top:18px;max-width:24ch;font-size:1.1875rem;line-height:1.4;color:var(--tinta)}
.abertura .btn{margin-top:22px}
.aviso{display:block;margin-top:14px;font-size:.8125rem;line-height:1.3;color:var(--muda);letter-spacing:.01em}
.ab-foto{margin:0;position:relative;z-index:1;flex:1 1 0;min-height:170px;margin-top:6px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mix-blend-mode:multiply}
.ab-foto img{position:absolute;left:0;top:-6%;width:100%;height:106%;object-fit:cover;object-position:50% 4%;will-change:transform}
/* grão fino sobre a foto: o mesmo tratamento em todas */
.ab-foto::after,.placa .quadro::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* TELA 2: a prova */
.prova{background:var(--tinta);color:var(--papel);min-height:84svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,16svh,160px) var(--gutr) clamp(96px,16svh,160px) var(--gut)}
.num{font:300 clamp(5.5rem,31vw,15rem)/.86 var(--serif);letter-spacing:-.045em;font-variant-numeric:tabular-nums lining-nums;margin:0}
.prova-leg{margin-top:30px;max-width:20ch;font:300 clamp(1.5rem,6.4vw,2.25rem)/1.12 var(--serif);letter-spacing:-.015em}
.fonte{display:block;margin-top:22px;font-size:.8125rem;line-height:1.4;color:var(--muda-claro);letter-spacing:.02em}

/* TELA 3: o ofício */
.oficio{padding:clamp(24px,6svh,64px) var(--gutr) clamp(24px,6svh,64px) var(--gut)}
.afirma{min-height:58svh;display:flex;flex-direction:column;justify-content:center;gap:22px}
.rot{font:600 .75rem/1 var(--sans);letter-spacing:.18em;color:var(--magenta);font-variant-numeric:tabular-nums}
.oficio h2{font-size:clamp(2.7rem,12.6vw,5.5rem);line-height:.98}
.oficio h2 em{color:var(--magenta)}

/* TELA 4: o trabalho */
.trabalho{background:var(--tinta);color:var(--papel);min-height:62svh;display:flex;align-items:center;justify-content:center;padding:clamp(96px,16svh,160px) 0;position:relative;overflow:hidden}
.ia-rotulo{position:absolute;left:var(--gut);bottom:16px;z-index:3;font-size:.75rem;line-height:1;letter-spacing:.06em;color:var(--papel);text-shadow:0 1px 6px rgba(43,15,31,.8)}
.pausa{position:relative;height:100svh;min-height:420px;background:var(--tinta);overflow:hidden}
.pausa .ia-mesa,.pausa .ia-mesa img{position:absolute;inset:0;width:100%;height:100%}
.pausa .ia-mesa img{object-fit:cover;object-position:76% 62%;filter:saturate(.82) contrast(.98)}
.pausa::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(43,15,31,.35),transparent 25%,transparent 70%,rgba(43,15,31,.6)),radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(43,15,31,.4))}
.pausa::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.placa{margin:0;width:100%;position:relative;z-index:1}
.placa .quadro{position:relative;display:block;overflow:hidden}
.placa img{width:100%;height:auto}
.placa .quadro::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--tinta) 0,transparent 12%,transparent 88%,var(--tinta) 100%),radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(43,15,31,.45))}
.placa figcaption{margin:22px var(--gutr) 0 var(--gut);font-size:.8125rem;line-height:1.4;color:var(--muda-claro);letter-spacing:.02em}

/* TELA 5: fechamento */
.fecho{background:var(--magenta);color:#fff;min-height:84svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:44px;padding:clamp(96px,16svh,160px) var(--gutr) clamp(96px,16svh,160px) var(--gut)}
.fecho h2{font-size:clamp(3.3rem,17vw,8rem);line-height:.94}

.faq{padding:clamp(96px,14svh,140px) var(--gutr) clamp(96px,14svh,140px) var(--gut);max-width:880px;margin:0 auto}
.faq h2{font-size:clamp(2.25rem,9vw,3.5rem)}
.faq-lista{margin-top:34px;border-top:1px solid rgba(43,15,31,.2)}
details{border-bottom:1px solid rgba(43,15,31,.2)}
summary{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:68px;padding:14px 0;cursor:pointer;font:400 1.3rem/1.25 var(--serif);letter-spacing:-.005em;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--magenta);border-bottom:2px solid var(--magenta);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(-135deg) translate(-3px,0)}
details p{padding:0 0 24px;max-width:46ch;color:var(--muda)}

.rodape{background:var(--tinta);color:var(--papel);padding:56px var(--gutr) calc(44px + env(safe-area-inset-bottom,0px)) var(--gut)}
.rodape-in{max-width:1180px;margin:0 auto;display:grid;gap:14px}
.logo-r{color:var(--papel)}
.perfis{display:flex;flex-wrap:wrap;gap:4px 22px}
.perfis a{display:inline-flex;align-items:center;min-height:48px;text-underline-offset:4px}
.mini{font-size:.8125rem;line-height:1.55;color:var(--muda-claro);max-width:60ch}

/* movimento: só quando o visitante não pede menos movimento */
@media (prefers-reduced-motion:no-preference){
  .js .ln > .reveal{transform:translateY(108%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0) * .09s)}
  .js .ln > .reveal.on{transform:none}
  .js .reveal.fade{opacity:0;translate:0 12px;transition:opacity .8s var(--ease),translate .8s var(--ease),transform .25s var(--ease),background-color .25s;transition-delay:calc(var(--i,0) * .09s),calc(var(--i,0) * .09s),0s,0s}
  .js .reveal.fade.on{opacity:1;translate:none}
  .js .dupla{background-size:0 2px,0 2px;transition:background-size .9s var(--ease) 1s}
  .js .dupla.on{background-size:100% 2px,100% 2px}
  .js .dupla.on{transition-delay:1s,1.15s}
}

/* tablet e desktop */
@media (min-width:760px){
  :root{--gut:max(48px,env(safe-area-inset-left,0px));--gutr:max(48px,env(safe-area-inset-right,0px))}
  .lede{max-width:28ch;font-size:1.3rem}
  .afirma{min-height:62svh}
}
@media (min-width:960px){
  :root{--gut:max(72px,calc((100vw - 1240px)/2),env(safe-area-inset-left,0px));--gutr:max(72px,calc((100vw - 1240px)/2),env(safe-area-inset-right,0px))}
  .abertura{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:100svh}
  .ab-txt{align-self:center;padding:96px 24px 40px var(--gut)}
  .abertura h1{font-size:clamp(5.5rem,8.4vw,8.4rem)}
  .ab-foto{margin:0;min-height:0;height:100%;max-height:none}
  .ab-foto img{object-position:50% 6%}
  .prova{display:grid;grid-template-columns:minmax(0,auto) 1fr;column-gap:96px;align-content:center;align-items:end}
  .num{grid-row:1/3;font-size:clamp(9rem,17vw,16rem)}
  .prova-leg{margin-top:0;align-self:end}
  .fonte{align-self:start}
  .oficio h2{font-size:clamp(4.5rem,7.4vw,7.2rem)}
  .placa figcaption{margin-left:var(--gut)}
  .fecho{flex-direction:row;align-items:center;justify-content:space-between}
  .fecho h2{font-size:clamp(6rem,10vw,10rem)}
  .rodape-in{grid-template-columns:1fr auto;align-items:center}
  .mini{grid-column:1/3}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}