@font-face { font-family: "Pinyon Script"; src: url("fontes/pinyon-script.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url("fontes/bebas-neue.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Questrial"; src: url("fontes/questrial.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Oswald"; font-weight: 300; src: url("fontes/oswald.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; src: url("fontes/montserrat-reta.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: italic; src: url("fontes/montserrat.woff2") format("woff2"); font-display: swap; }

:root {
  --fundo: #E3D9C5;
  --caixa: #E9E4D9;
  --vinho: #A14949;
  /* cada slide é desenhado em 1600 x 900; --u é um "pixel" dessa grade */
  --u: min(calc(100vw / 1600), calc(100vh / 900));
  /* a grade fica centralizada dentro de cada seção */
  --ox: calc((100vw - 1600 * var(--u)) / 2);
  --oy: calc((100vh - 900 * var(--u)) / 2);
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--fundo); color: var(--vinho); scroll-snap-type: y mandatory; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { font-family: "Questrial", sans-serif; }
h1, h2, h3 { font: inherit; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: calc(3 * var(--u)) solid var(--vinho); outline-offset: calc(3 * var(--u)); }

/* cada seção ocupa a tela; as figuras passam da grade e só param na borda da seção */
.slide { position: relative; height: 100vh; overflow: clip; scroll-snap-align: start; scroll-snap-stop: always; }

.a {
  position: absolute;
  left: calc(var(--ox) + var(--x) * var(--u));
  top: calc(var(--oy) + var(--y) * var(--u));
  width: calc(var(--w, auto) * var(--u));
  height: calc(var(--h, auto) * var(--u));
}
.a:not([style*="--w"]) { width: auto; white-space: nowrap; }
.a:not([style*="--h"]) { height: auto; }

.script, .caps { display: block; font-size: calc(var(--fs) * var(--u)); line-height: 1; white-space: nowrap; }
.script { font-family: "Pinyon Script", cursive; }
.caps { font-family: "Bebas Neue", sans-serif; text-transform: uppercase; letter-spacing: -.005em; }
.caps--forte { -webkit-text-stroke: calc(4 * var(--u)) var(--vinho); }

.fig { display: block; height: auto; pointer-events: none; user-select: none; }
.fig--quadro { object-fit: cover; object-position: 45% 50%; height: calc(var(--h) * var(--u)); }
.fig--palacio { object-position: 70% 50%; }

.linha { font-family: "Oswald", sans-serif; font-weight: 300; font-size: calc(29 * var(--u)); }
.linha--it { font-style: italic; }

.capa .fig--capa { mix-blend-mode: multiply; }
.seta { padding: 0; transition: transform .2s ease; }
.seta svg { width: 100%; height: 100%; fill: none; stroke: var(--vinho); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.seta:hover { transform: translateX(calc(6 * var(--u))); }

.oval {
  display: flex; align-items: center; justify-content: center;
  font: italic 700 calc(30 * var(--u))/1.2 "Montserrat", sans-serif;
  text-align: center; z-index: 2;
}
.oval--maior { font-size: calc(32 * var(--u)); }
.oval::before {
  content: ""; position: absolute; inset: -18% -3%;
  border: calc(1.6 * var(--u)) solid var(--vinho); border-radius: 50%;
  transform: rotate(-10deg); pointer-events: none;
}

.caixa { border: calc(2 * var(--u)) solid var(--vinho); background: var(--caixa); width: 100%; height: 100%; }
.caixa.a { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }

.caixa--num {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: calc(32 * var(--u)); text-align: center; line-height: 1.2;
}
.caixa--num b { font: 400 calc(68 * var(--u))/1.05 "Bebas Neue", sans-serif; margin-bottom: calc(4 * var(--u)); }
button.caixa { transition: background .18s ease, color .18s ease; }
button.caixa:hover { background: var(--vinho); color: var(--caixa); }

.caixa--destaque {
  display: flex; align-items: center; justify-content: center;
  padding: calc(16 * var(--u)) calc(30 * var(--u));
  font-size: calc(var(--fs) * var(--u)); line-height: 1.38; text-align: center;
}
.caixa--tese { flex-direction: column; gap: calc(22 * var(--u)); }
.caixa--tese h3 { text-transform: uppercase; }

.caixa--titulada { padding: calc(18 * var(--u)) calc(22 * var(--u)); }
.caixa--titulada h3 { font: 400 calc(46 * var(--u))/1 "Bebas Neue", sans-serif; text-transform: uppercase; margin-bottom: calc(14 * var(--u)); }
.caixa--titulada p { font-size: calc(31 * var(--u)); line-height: 1.32; text-align: center; }
.caixa--ministro p { font-size: calc(28 * var(--u)); line-height: 1.38; text-align: left; }

.texto { font-size: calc(30 * var(--u)); line-height: 1.38; }
.texto h3 { text-transform: uppercase; font-size: calc(28 * var(--u)); margin-bottom: calc(32 * var(--u)); }
.texto--dir { text-align: right; }
.texto--menor { font-size: calc(26 * var(--u)); }
.texto--menor h3 { font-size: calc(26 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.texto--menor p + h3 { margin-top: calc(24 * var(--u)); }

.nota { font: 700 calc(19 * var(--u))/1.3 "Montserrat", sans-serif; text-align: center; }

.cartao {
  display: flex; flex-direction: column; justify-content: center;
  border: calc(2 * var(--u)) solid var(--vinho); border-radius: calc(30 * var(--u));
  padding: calc(24 * var(--u)) calc(30 * var(--u));
}
.cartao h3 { font: 700 calc(35 * var(--u))/1.2 "Montserrat", sans-serif; text-transform: uppercase; text-align: center; margin-bottom: calc(26 * var(--u)); }
.cartao p { font-size: calc(32 * var(--u)); line-height: 1.35; }

.faixa {
  display: flex; align-items: center; justify-content: center; gap: .3em;
  border: calc(2 * var(--u)) solid var(--vinho); text-align: center;
  font: italic 400 calc(35 * var(--u))/1.2 "Questrial", sans-serif;
}
.faixa strong, .faixa--forte { font: italic 700 calc(35 * var(--u))/1.2 "Montserrat", sans-serif; }

.lista { font-size: calc(26 * var(--u)); line-height: 1.3; }
.lista li { position: relative; padding-left: calc(26 * var(--u)); margin-bottom: calc(34 * var(--u)); }
.lista li::before { content: ""; position: absolute; left: 0; top: .5em; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--vinho); }

/* aparecer ao rolar: a escrita se desenha da esquerda para a direita e o resto sobe em sequência */
.com-efeito .slide .a { opacity: 0; transform: translateY(calc(26 * var(--u))); }
.com-efeito .slide .a.script { transform: none; clip-path: inset(-40% 100% -40% -6%); }
.com-efeito .slide .a.fig { transform: translateY(calc(40 * var(--u))); }
.com-efeito .slide .a.visto,
.com-efeito .slide.visto .a {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .75s cubic-bezier(.2,.7,.2,1), clip-path 1s cubic-bezier(.3,.1,.2,1);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.com-efeito .slide .a.script.visto,
.com-efeito .slide.visto .a.script { clip-path: inset(-40% -6% -40% -6%); opacity: 1; }
.com-efeito .slide .seta.visto:hover,
.com-efeito .slide.visto .seta:hover { transform: translateX(calc(6 * var(--u))); transition-delay: 0s; }

.controles {
  position: fixed; right: 14px; bottom: 12px; z-index: 5;
  display: flex; align-items: center; gap: 2px; font-size: 14px;
  padding: 3px 6px; border-radius: 22px; background: var(--fundo);
  opacity: .28; transition: opacity .2s ease;
}
.controles:hover, .controles:focus-within { opacity: 1; }
.controles button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.controles button:hover { background: var(--caixa); }
.controles button:disabled { opacity: .3; cursor: default; }
.controles svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.controles span { min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
.progresso { position: fixed; inset: auto 0 0 0; height: 3px; z-index: 4; }
.progresso i { display: block; height: 100%; width: 0; background: var(--vinho); transition: width .28s ease; }

/* celular em pé: a grade vira uma coluna que rola */
@media (max-aspect-ratio: 1/1) {
  :root { --u: calc(100vw / 720); --ox: 0px; --oy: 0px; }
  html { scroll-snap-type: none; }
  .slide { display: flex; flex-direction: column; gap: calc(34 * var(--u)); height: auto; min-height: 100vh; padding: calc(56 * var(--u)) calc(40 * var(--u)) calc(70 * var(--u)); }
  .slide:last-of-type { padding-bottom: calc(120 * var(--u)); }
  .a, .caixa.a, .a:not([style*="--w"]), .a:not([style*="--h"]) { position: relative; left: auto; top: auto; width: auto; height: auto; white-space: normal; }
  .slide h1, .slide h2 { display: flex; flex-direction: column; line-height: 1; }
  .script { font-size: calc(112 * var(--u)); white-space: normal; line-height: 1.1; }
  .caps { font-size: calc(92 * var(--u)); white-space: normal; }
  .capa .caps { font-size: calc(150 * var(--u)); -webkit-text-stroke-width: calc(2 * var(--u)); }
  .capa .fig--capa { mix-blend-mode: normal; }
  .capa .script { font-size: calc(170 * var(--u)); }
  .fig, .fig--quadro { width: auto; max-width: 100%; height: calc(520 * var(--u)); object-fit: contain; align-self: center; order: 9; }
  .linha { white-space: normal; }
  .seta.a { align-self: flex-end; width: calc(118 * var(--u)); height: calc(67 * var(--u)); }
  .oval { margin: calc(26 * var(--u)) calc(20 * var(--u)); padding: 0 calc(16 * var(--u)); }
  .caixa--destaque, .caixa--titulada, .cartao, .faixa { padding: calc(26 * var(--u)); min-height: 0; }
  .faixa { display: block; }
  .roteiro { display: grid; gap: calc(16 * var(--u)); }
  .caixa--num { padding: calc(20 * var(--u)); }
  .texto--dir { text-align: left; }
  .lista li { margin-bottom: calc(24 * var(--u)); }
  .controles { right: 50%; transform: translateX(50%); opacity: 1; bottom: 10px; box-shadow: 0 0 0 1px var(--vinho); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .com-efeito .slide .a { opacity: 1; transform: none; clip-path: none; }
}