/* ============================================================
   MATHY LEMOSS — BASE
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--preto-ameixa);
  color:var(--creme);
  font-family:var(--ui);
  font-size:var(--fs-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--rosa);color:var(--ameixa-900)}

/* ---------- FOCO VISÍVEL ---------- */
:focus-visible{
  outline:2px solid var(--dourado-claro);
  outline-offset:3px;
  border-radius:4px;
}

.pular-para{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--creme);color:var(--ameixa-900);
  padding:.9rem 1.4rem;border-radius:0 0 10px 0;
  font-size:var(--fs-small);font-weight:700;
}
.pular-para:focus{left:0}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------
   ESTRUTURA
   ------------------------------------------------------------ */

.secao{
  position:relative;
  background:var(--ch-bg);
  color:var(--ch-fg);
  padding-block:var(--sec-y);
  overflow:clip;
  transition:background-color 700ms var(--e-soft);
}
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:2;
}

/* ------------------------------------------------------------
   TIPOGRAFIA
   ------------------------------------------------------------ */

.rotulo{
  font-family:var(--ui);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:var(--tr-wide);
  text-transform:uppercase;
  color:var(--ch-accent);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.rotulo::before{
  content:"";
  width:clamp(20px,3vw,46px);height:1px;
  background:currentColor;opacity:.6;
}

.titulo{
  font-family:var(--display);
  font-size:var(--fs-h2);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.monumento{
  font-family:var(--display);
  font-size:var(--fs-mono);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.025em;
}
.sub{
  font-family:var(--display);
  font-size:var(--fs-sub);
  font-weight:400;
  line-height:1.18;
  letter-spacing:-.01em;
}
.emo{
  font-family:var(--emo);
  font-style:italic;
  font-weight:400;
  color:var(--ch-accent);
}
.corpo{
  font-size:var(--fs-body);
  color:var(--ch-fg-soft);
  max-width:60ch;
}
.corpo + .corpo{margin-top:1.1em}
.lead{
  font-size:var(--fs-lead);
  line-height:1.42;
  color:var(--ch-fg);
  max-width:34ch;
}
.micro{
  font-size:var(--fs-micro);
  letter-spacing:var(--tr-mid);
  text-transform:uppercase;
  font-weight:600;
  color:var(--ch-fg-mute);
}

/* ------------------------------------------------------------
   TEXTURA E CAMADAS
   ------------------------------------------------------------ */

.grao{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.botanica{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:0;
  opacity:.82;
}

/* campo de cor difuso — sem filter:blur, que é caro em área grande */
.brilho{
  position:absolute;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
}

/* ------------------------------------------------------------
   REVELAÇÃO NO SCROLL (fallback sem JS = tudo visível)
   ------------------------------------------------------------ */

.js .rev{opacity:0;transform:translateY(28px)}
.js .rev.dentro{
  opacity:1;transform:none;
  transition:opacity 900ms var(--e-out),transform 900ms var(--e-out);
}

@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1!important;transform:none!important}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}