/* Página do Presto. Veste a estética do app (docs/estetica.md): papel de receituário, tinta castanha,
   Cormorant nos títulos, Jost no texto, o suco do caju só onde há ação. */

@font-face { font-family: "Cormorant"; src: url("/fontes/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fontes/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fontes/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fontes/cormorant-garamond-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fontes/jost-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fontes/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fontes/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --fundo: #F7EFE1;
  --superficie: #FCF8F0;
  --fio: #E7D9C2;
  --fio-forte: #D6C2A2;
  --tinta: #3A2A1F;
  --tinta-media: #6E4A32;
  --caju: #C2442D;
  --caju-texto: #B53C27;
  --caju-maduro: #A72F2A;
  --folha: #4B6B35;
  --suco: linear-gradient(180deg, #EBAE45 0%, #D2582E 55%, #A72F2A 100%);
  --sombra: 0 1px 2px rgba(110, 74, 50, .08), 0 28px 60px -22px rgba(167, 47, 42, .30);
  --curva: cubic-bezier(.22, 1, .36, 1);
  --titulo: "Cormorant", Georgia, serif;
  --texto: "Jost", system-ui, sans-serif;
  --largura: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 300 18px/1.6 var(--texto);
  -webkit-font-smoothing: antialiased;
}
.grao { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: .22; mix-blend-mode: multiply; color: #6E4A32; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--titulo); font-weight: 500; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(42px, 5.4vw, 72px); }
h2 { font-size: clamp(34px, 4vw, 54px); }
h3 { font-size: 28px; }
h1 em, h2 em { font-style: italic; color: var(--caju); }
p { margin: 0; max-width: 60ch; }

.botao {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.6em; border-radius: 999px;
  background: var(--caju-texto); color: var(--superficie);
  font: 500 15px/1 var(--texto); letter-spacing: .04em; text-decoration: none;
  transition: background .3s var(--curva), transform .3s var(--curva);
}
.botao:hover { background: var(--caju-maduro); transform: translateY(-1px); }
.botao-pequeno { padding: .65em 1.2em; font-size: 14px; }
.link { color: var(--caju-texto); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; font-weight: 400; }
.link:hover { color: var(--caju-maduro); }
:focus-visible { outline: 2px solid var(--caju); outline-offset: 2px; }

/* topo */
.topo { max-width: var(--largura); margin: 0 auto; padding: 28px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: flex; align-items: baseline; gap: 12px; text-decoration: none; flex-wrap: wrap; }
.marca-nome { font: italic 600 34px/1 var(--titulo); background: var(--suco); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.marca-descritor { font: 500 11px/1.3 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-media); }
.topo nav { display: flex; align-items: center; gap: 20px; }
.lingua { font-size: 15px; color: var(--tinta-media); text-decoration: none; }
.lingua:hover { color: var(--caju-texto); }

main > section { max-width: var(--largura); margin: 0 auto; padding: 72px 24px; }

/* abertura */
.abertura { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding-top: 32px !important; }
.abertura-texto { display: grid; gap: 24px; }
.abertura-texto p { color: var(--tinta-media); }
.acoes { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }

/* lentes: a mesma tela em três paletas, separadas por fios ondulados que andam */
.lentes { position: relative; margin: 0; aspect-ratio: 1440 / 900; border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); background: var(--superficie); }
.lente { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.lentes-fios { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.lentes-fios .fio { fill: none; stroke: url(#suco); stroke-width: 2; }
.lentes-fios .fio-brilho { fill: none; stroke: #EBAE45; stroke-width: 10; opacity: .28; filter: blur(5px); }
.lentes figcaption { position: absolute; inset: auto 0 14px 0; height: 0; }
.lentes figcaption span {
  position: absolute; bottom: 0; transform: translateX(-50%);
  font: 500 11px/1 var(--texto); letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(252, 248, 240, .9); color: var(--tinta);
  backdrop-filter: blur(4px);
}

/* vídeo */
.video { display: grid; gap: 16px; justify-items: center; text-align: center; }
.video p { color: var(--tinta-media); }
.video-moldura { width: 100%; margin-top: 24px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); background: #1D1510; }
.video-moldura video, .video-moldura iframe, .video-capa img { width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-capa { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: none; }
.video-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--caju-texto); transition: transform .3s var(--curva); }
.video-play::after { content: ""; position: absolute; left: 34px; top: 27px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent #FCF8F0; }
.video-capa:hover .video-play { transform: scale(1.06); }

/* passos */
.passos h2 { text-align: center; margin-bottom: 48px; }
.passos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 88px; }
.passo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.passo:nth-child(even) .passo-texto { order: 2; }
.passo-texto { display: grid; gap: 14px; }
.passo-texto p { color: var(--tinta-media); }
.passo-n { font: italic 600 64px/1 var(--titulo); background: var(--suco); -webkit-background-clip: text; background-clip: text; color: transparent; }
.passo img { border-radius: 14px; box-shadow: var(--sombra); border: 1px solid var(--fio); }

/* paletas */
.paletas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.paletas-texto { display: grid; gap: 20px; }
.paletas-texto p { color: var(--tinta-media); }
.amostras { display: flex; gap: 10px; flex-wrap: wrap; }
.amostras button {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 16px 10px 10px; border-radius: 999px; border: 1px solid var(--fio-forte);
  background: transparent; color: var(--tinta); font: 400 15px/1 var(--texto);
  transition: border-color .3s var(--curva), background .3s var(--curva);
}
.amostras button[aria-checked="true"] { border-color: var(--caju-texto); background: var(--superficie); }
.amostras i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(58, 42, 31, .2); }
.amostras [data-paleta="papel"] i { background: linear-gradient(135deg, #F7EFE1 50%, #C2442D 50%); }
.amostras [data-paleta="castanha"] i { background: linear-gradient(135deg, #1D1510 50%, #E06A50 50%); }
.amostras [data-paleta="ardosia"] i { background: linear-gradient(135deg, #1E2A33 50%, #E06A50 50%); }
.tela-paleta { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 1440 / 900; }
.tela-paleta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.tela-paleta img.pintando { clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); animation: pintar .8s var(--curva) forwards; }
@keyframes pintar { to { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); } }

/* resto e fim */
.resto { text-align: center; display: grid; gap: 20px; justify-items: center; }
.resto p { color: var(--tinta-media); }
.fim { text-align: center; display: grid; gap: 20px; justify-items: center; position: relative; padding-top: 112px !important; }
.fim::before { content: ""; position: absolute; top: 40px; left: 50%; width: 120px; height: 3px; margin-left: -60px; border-radius: 3px; background: linear-gradient(90deg, #EBAE45, #D2582E 55%, #A72F2A); }
.fim p { color: var(--tinta-media); }
.fim .acoes { justify-content: center; }

.rodape { max-width: var(--largura); margin: 0 auto; padding: 48px 24px 64px; border-top: 1px solid var(--fio); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 15px; color: var(--tinta-media); }

/* entrada sem pressa */
.surge { opacity: 0; transform: translateY(6px); transition: opacity .6s var(--curva), transform .6s var(--curva); }
.surge.visto { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .abertura, .passo, .paletas { grid-template-columns: 1fr; gap: 32px; }
  .passo:nth-child(even) .passo-texto { order: 0; }
  main > section { padding: 56px 20px; }
  .marca-descritor { display: none; }
  .lingua { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .surge { opacity: 1; transform: none; }
}