/* Centro Estético Leila Soares · base do site
   Tokens e regras em 02-conceito/sistema.md. Nenhuma seção usa valor fora daqui. */
:root{
  --creme:#f9f1e7; --papel:#fffaf3; --mel-1:#efd9c2; --mel-2:#dcb18b; --madeira:#a36c47; --madeira-texto:#87532f;
  --ambar:#f7cf91; --led:#fff3d2; --basalto:#211c1a; --basalto-2:#2f2825; --pink:#cf2f6c;
  --tinta:#2a1c16; --tinta-2:#6f5648; --creme-escuro:#f3e4d1;
  --filete:rgba(42,28,22,.14);
  --margem:clamp(1.25rem,5vw,4.5rem);
  --respiro:clamp(5rem,11vw,9.5rem);
  --largura:82rem;
  --foto-l:min(27rem,calc((100svh - 11.5rem) * .5866));
  --curva:cubic-bezier(.2,.7,.2,1);
  --pouso:cubic-bezier(.3,1.3,.5,1);
  --display:"Gloock",Georgia,serif;
  --sans:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1.5rem}
body{font-family:var(--sans);color:var(--tinta);background:var(--creme);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular{position:absolute;left:1rem;top:-4rem;z-index:50;background:var(--basalto);color:var(--creme);padding:.7rem 1rem;border-radius:.6rem;text-decoration:none;font-weight:700}
.pular:focus{top:1rem}

/* tipografia comum */
.olho{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--madeira-texto)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,4.6vw,4.4rem);line-height:1;letter-spacing:-.02em;text-wrap:balance}
h3{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.12;letter-spacing:-.01em}
.dela-fala{font-family:var(--display);font-weight:400}

/* botões */
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--basalto);color:var(--creme);text-decoration:none;font-weight:700;font-size:.98rem;padding:.95rem 1.5rem;border-radius:99px;box-shadow:0 16px 30px -14px rgba(34,29,27,.7);transition:transform .3s,background .3s}
.btn:hover{transform:translateY(-2px);background:var(--pink)}
.btn svg{width:1.1rem;height:1.1rem;flex:none}
.sec{font-weight:700;font-size:.94rem;text-underline-offset:.3em;text-decoration-thickness:1.5px;text-decoration-color:var(--mel-2)}
.sec:hover{text-decoration-color:var(--pink)}

/* a fita de LED: única divisória do site e prateleira onde as coisas pousam */
.led{position:relative;height:5px;border-radius:5px;background:var(--led);box-shadow:0 0 22px 8px rgba(255,210,140,.85),0 0 70px 26px rgba(247,190,110,.45);animation:led 7s ease-in-out infinite alternate}
@keyframes led{to{opacity:.72}}

/* a pedra (as formas #f1 a #f6 e os gradientes estão no SVG do topo do index.html) */
.pedra{display:block;overflow:visible}
.pedra .calor{animation:calor var(--t,6s) ease-in-out infinite alternate}
.pedra .calor{transition:opacity 1.2s}
/* pedra fria: só com JS, que é quem a esquenta depois */
.js .pedra.fria .calor{animation:none;opacity:0}
@keyframes calor{from{opacity:.35}to{opacity:1}}

/* granulado para qualquer seção com malha */
.grao{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.055;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='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

/* entrada pela rolagem: um gesto por seção. Sem JS, tudo já está visível. */
@keyframes surge{from{opacity:0;transform:translateY(12px)}}
.js [data-r]{opacity:0;transform:translateY(14px);transition:opacity 1s var(--curva),transform 1s var(--curva);transition-delay:calc(var(--d,0) * 1ms)}
.js [data-r].visto{opacity:1;transform:none}

/* WhatsApp que acompanha a rolagem */
.zap-fixo{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:.55rem;background:var(--basalto);color:var(--creme);text-decoration:none;font-weight:700;font-size:.92rem;padding:.85rem 1.2rem;border-radius:99px;box-shadow:0 18px 34px -14px rgba(34,29,27,.8),0 0 0 1px rgba(255,243,210,.18);opacity:0;transform:translateY(1.2rem);pointer-events:none;transition:opacity .5s,transform .5s var(--curva),background .3s}
.zap-fixo.on{opacity:1;transform:none;pointer-events:auto}
.zap-fixo:hover{background:var(--pink)}
.zap-fixo svg{width:1.15rem;height:1.15rem}

@media (max-width:860px){
  .zap-fixo{padding:0;width:3.3rem;height:3.3rem;justify-content:center}
  .zap-fixo span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .zap-fixo svg{width:1.4rem;height:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-r]{opacity:1;transform:none}
}