/* Base: variáveis do sistema visual (02-conceito/sistema.md) e componentes que se repetem */
:root {
  --parede: oklch(0.935 0.028 72);
  --pessego: oklch(0.905 0.05 48);
  --lilas-ceu: oklch(0.885 0.04 295);
  --ceu: oklch(0.87 0.055 245);
  --luz: oklch(0.97 0.045 88);
  --ouro: #b88d3c;
  --ouro-claro: #e5c98c;
  --madeira: #7a4a22;
  --tinta: #2b1d12;
  --tinta-2: #6c5a4b;
  --papel: #fffaf3;
  --lousa: oklch(0.27 0.012 200);
  --f-titulo: "Young Serif", Georgia, serif;
  --f-texto: "Onest", system-ui, sans-serif;
  --f-giz: "Caveat Brush", "Comic Sans MS", cursive;
  --margem: clamp(1.25rem, 4.5vw, 4.5rem);
  --respiro: clamp(4.5rem, 11vh, 8.5rem);
  --largura: 78rem;
  --casinha: polygon(0 21%, 50% 0, 100% 21%, 100% 100%, 0 100%);
  --pisa: cubic-bezier(.2,.9,.3,1.1);
  --sombra: 0 16px 34px -20px rgba(80,50,20,.45);
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { font-family: var(--f-texto); color: var(--tinta); background: var(--parede); line-height: 1.6; font-size: clamp(1rem, 1.16vw, 1.1rem); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--madeira); outline-offset: 3px; border-radius: 4px; }
.pular { position: absolute; left: -999px; top: 0; background: var(--tinta); color: var(--papel); padding: .7rem 1rem; z-index: 100; }
.pular:focus { left: 0; }

.secao { position: relative; isolation: isolate; padding: var(--respiro) var(--margem); }
.dentro { max-width: var(--largura); margin: 0 auto; }
.olho { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--tinta-2); line-height: 1.4; }
.h2 { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.9rem); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.h3 { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.15; letter-spacing: -.01em; }
.grao { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.botao { display: inline-flex; align-items: center; gap: .6rem; background: var(--tinta); color: var(--papel); text-decoration: none; font-weight: 600; font-size: 1rem; line-height: 1.2; padding: .95rem 1.45rem; border-radius: 999px; box-shadow: 0 12px 24px -14px rgba(43,29,18,.8); transition: transform .25s; }
.botao:hover { transform: translateY(-2px); }
.botao .zap { width: 1.15rem; height: 1.15rem; flex: none; }
.botao.claro { background: var(--papel); color: var(--tinta); }
.elo { font-weight: 600; text-underline-offset: .35em; text-decoration-thickness: 1.5px; text-decoration-color: var(--ouro); }

/* a casinha: moldura dourada em forma de casa para toda foto real */
.casinha { margin: 0; filter: drop-shadow(0 16px 20px rgba(80,50,20,.26)); }
.casinha .moldura { position: relative; clip-path: var(--casinha); background: linear-gradient(160deg, var(--ouro-claro), #c9a362); padding: 6px; aspect-ratio: 1 / 1.42; }
.casinha .moldura img { width: 100%; height: 100%; object-fit: cover; clip-path: var(--casinha); }
.prateleira { height: 5px; border-radius: 3px; background: linear-gradient(90deg, #a67c2e, var(--ouro-claro) 40%, #a67c2e); box-shadow: 0 6px 10px -4px rgba(80,50,20,.5); }

/* entrada na rolagem: um gesto por elemento, de baixo para cima */
.js [data-entra] { opacity: 0; transform: translateY(34px); }
.js [data-entra].visto { opacity: 1; transform: none; transition: opacity .8s ease, transform .9s var(--pisa); transition-delay: calc(var(--i, 0) * .12s); }

/* o balão do logo sobe com a rolagem */
.sobe-balao { position: fixed; z-index: 30; right: clamp(.35rem, 1.1vw, 1.1rem); bottom: 0; width: clamp(1.7rem, 2.2vw, 2.3rem); pointer-events: none; opacity: 0; transition: opacity .6s; will-change: transform; filter: drop-shadow(0 6px 6px rgba(80,50,20,.22)); }
.sobe-balao.ligado { opacity: 1; }
/* botão de WhatsApp que acompanha a rolagem no celular */
.zap-fixo { position: fixed; z-index: 40; left: .8rem; right: .8rem; bottom: .8rem; display: none; justify-content: center; transform: translateY(140%); transition: transform .5s var(--pisa); }
.zap-fixo.ligado { transform: none; }
@media (max-width: 900px) { .zap-fixo { display: flex; } .sobe-balao { width: 1.5rem; right: .25rem; } body { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-entra] { opacity: 1; transform: none; }
  .zap-fixo { transition: none; }
}