/* ==========================================================================
   BOTTEGA MOREIRA · base compartilhada (página de vendas + área do aluno)
   Identidade do Igor Moreira: pretos de tinta, osso, tom de pele.
   ========================================================================== */

:root{
  /* tinta */
  --ink-000:#060607;
  --ink-050:#0a0a0c;
  --ink-100:#0f0f12;
  --ink-200:#15151a;
  --ink-300:#1d1d23;
  --ink-400:#27272f;
  --ink-500:#34343d;

  /* osso */
  --bone:#f1ede5;
  --bone-2:#bdb8ae;
  --bone-3:#8e8a80;
  --bone-4:#75716a;

  /* pele (acento) */
  --skin:#c08f75;
  --skin-2:#a0705a;
  --skin-3:#e2b9a2;
  --skin-soft:rgba(192,143,117,.14);
  --skin-line:rgba(192,143,117,.38);

  --line-1:rgba(241,237,229,.08);
  --line-2:rgba(241,237,229,.15);
  --line-3:rgba(241,237,229,.28);

  --display:'Bodoni Moda',"Didot","Times New Roman",serif;
  --body:'Archivo',system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-xs:2px;
  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --r-pill:999px;

  --e1:0 2px 8px -4px rgba(0,0,0,.7);
  --e2:0 18px 40px -20px rgba(0,0,0,.9);
  --e3:0 40px 90px -30px rgba(0,0,0,.95);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --fast:.22s;
  --mid:.42s;
  --slow:.8s;

  --gutter:clamp(16px,4vw,48px);
  --maxw:1240px;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--ink-000);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--skin);color:var(--ink-000)}
:focus-visible{outline:1.5px solid var(--skin);outline-offset:3px;border-radius:2px}

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

/* grão de papel sobre tudo */
.grain{
  position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}
  60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}

/* tipografia */
.display{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:.92}
.eyebrow{
  font-family:var(--body);font-stretch:75%;font-weight:600;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--bone-3);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--skin)}
.eyebrow.no-line::before{display:none}
.italic{font-style:italic}
.skin{color:var(--skin)}
.muted{color:var(--bone-3)}

/* lírio (logo) */
.lily{width:1em;height:auto;fill:currentColor}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-stretch:80%;font-weight:700;letter-spacing:.34em;font-size:12px;text-transform:uppercase}
.brand .lily{width:18px;color:var(--skin)}
.brand b{font-weight:700;color:var(--bone)}
.brand span{font-weight:400;color:var(--bone-3)}

/* botões */
.btn{
  --bg:var(--bone);--fg:var(--ink-000);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 26px;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);
  font-family:var(--body);font-stretch:85%;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;
  transition:transform var(--fast) var(--ease),box-shadow var(--mid) var(--ease);
  will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--skin);transform:scale(0,1);transform-origin:left center;
  transition:transform .55s var(--ease-out);
}
.btn:hover::before{transform:scale(1,1)}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px;flex:none}
.btn.ghost{--bg:transparent;--fg:var(--bone);box-shadow:inset 0 0 0 1px var(--line-3)}
.btn.ghost:hover{color:var(--ink-000)}
.btn.skin{--bg:var(--skin);--fg:var(--ink-000)}
.btn.skin::before{background:var(--bone)}
.btn.sm{min-height:40px;padding:0 18px;font-size:11px}

/* cursor de agulha (só em ponteiro fino) */
.cursor,.cursor-ring{position:fixed;left:0;top:0;z-index:200;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.cursor{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--skin);mix-blend-mode:difference}
.cursor-ring{
  width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(241,237,229,.4);
  display:grid;place-items:center;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .35s,border-color .35s,opacity .3s;
}
.cursor-ring span{font-family:var(--body);font-stretch:80%;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-000);opacity:0;transition:opacity .2s}
.has-cursor .cursor,.has-cursor .cursor-ring{opacity:1}
.cursor-ring.is-hover{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--skin)}
.cursor-ring.is-label{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--bone);border-color:var(--bone)}
.cursor-ring.is-label span{opacity:1}
.cursor-ring.is-down{transform:scale(.85)}
@media (hover:hover) and (pointer:fine){
  .has-cursor, .has-cursor a, .has-cursor button{cursor:none}
  .has-cursor input,.has-cursor textarea{cursor:text}
}

/* transição de página: a tinta cobre a tela */
.ink-veil{position:fixed;inset:0;z-index:300;pointer-events:none}
.ink-veil svg{width:100%;height:100%}
.ink-veil.is-active{pointer-events:all}

/* toast */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:250;transform:translate(-50%,30px);opacity:0;
  display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);
  padding:14px 20px;border-radius:var(--r-pill);background:var(--bone);color:var(--ink-000);
  font-size:14px;font-weight:500;box-shadow:var(--e3);
  transition:transform .5s var(--ease-out),opacity .3s;
}
.toast.is-on{transform:translate(-50%,0);opacity:1}
.toast .lily{width:16px;color:var(--skin-2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .grain{display:none}
}