/* base.css — Palestras Luiz Gaziri · v2 · primitivos (reset, container, tipografia, botões,
   header fixo + menu off-canvas, rodapé, botão flutuante, reveal, marca-texto, fontes).
   Base-kit BuildV reskinado. SÓ tokens (assets/css/tokens.css). */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
/* overflow-x no HTML (clip), nunca no body: body quebra position:sticky */
html{overflow-x:clip}
body{min-height:100dvh;font-family:var(--font-body);color:var(--c-text);background:var(--c-bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.08;text-wrap:balance}
p,li{text-wrap:pretty}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
input,select,textarea{font:inherit;color:inherit}
ul,ol{padding:0;list-style:none}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--c-lime);outline-offset:3px}
.is-light :where(a,button,input,select,textarea,[tabindex]):focus-visible,
.is-green :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline-color:var(--c-forest)}
::selection{background:var(--c-lime);color:var(--c-forest)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ---------- utilidades ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--px)}
.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}
.hl{color:var(--c-lime)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-body);font-size:.78rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--c-lime);margin-bottom:18px}
.eyebrow::before{content:"";flex:0 0 auto;width:10px;height:10px;background:currentColor}
.h2{font-size:clamp(2rem,1.2rem + 3.6vw,4.2rem);letter-spacing:-.02em;line-height:1}
.is-light{background:var(--c-mint);color:var(--c-ink)}
.is-white{background:var(--c-white);color:var(--c-ink)}
.is-light .eyebrow,.is-white .eyebrow{color:var(--c-ink)}
.is-light .eyebrow::before,.is-white .eyebrow::before{background:var(--c-green)}
.is-light .hl,.is-white .hl{color:var(--c-green-dark)}
.is-green{background:var(--c-green);color:var(--c-on-green)}
.is-green .eyebrow{color:var(--c-on-green)}
.is-green .eyebrow::before{background:var(--c-forest)}
/* destaque sobre verde vivo: branco não passa AA sobre #00DC70, então vira floresta + faixa lime */
.is-green .hl,.hl--mark{color:var(--c-forest);background-image:linear-gradient(var(--c-lime),var(--c-lime));background-repeat:no-repeat;
  background-position:0 92%;background-size:100% .34em;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding-inline:.04em}

/* ---------- marca-texto de evidência ----------
   Os dados em negrito da copy ganham um traço de marca-texto que "passa" quando o bloco
   entra na tela. Sem JS / reduced-motion: marcação já pintada. */
.mk strong,.mk em{font-weight:600;color:inherit;
  background-image:linear-gradient(var(--mk-light),var(--mk-light));background-repeat:no-repeat;
  background-position:0 88%;background-size:100% .42em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding-inline:.08em;transition:background-size .9s var(--ease) .35s}
.mk--dark strong,.mk--dark em{background-image:linear-gradient(var(--mk-dark),var(--mk-dark));color:var(--c-white)}
.js .mk:not(.is-in):not(.mk--on) strong,.js .mk:not(.is-in):not(.mk--on) em{background-size:0% .42em}
@media (prefers-reduced-motion: reduce){.mk strong,.mk em{transition:none;background-size:100% .42em !important}}

/* ---------- fonte citada (texto entre parênteses nas palestras) ---------- */
.src{display:inline-block;max-width:100%;margin-left:.2em;padding:.05em .55em;vertical-align:.08em;
  font-size:.74em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;
  color:var(--c-lime);border:1px solid color-mix(in srgb,var(--c-lime) 38%,transparent);border-radius:var(--r-sm)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;
  padding:.95em 1.8em;border-radius:var(--r-sm);font-family:var(--font-body);font-weight:700;font-size:1.05rem;line-height:1.1;
  text-align:center;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn svg{width:1.1em;height:1.1em;flex:0 0 auto;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--green{background:var(--c-green);color:var(--c-on-green);box-shadow:var(--shadow-green)}
.btn--green:hover{background:var(--c-lime);transform:translateY(-2px)}
.btn--forest{background:var(--c-forest);color:var(--c-lime)}
.btn--forest:hover{background:var(--c-forest-3);color:var(--c-lime);transform:translateY(-2px)}
.btn--ink{background:var(--c-navy);color:var(--c-white)}
.btn--ink:hover{background:var(--c-forest);transform:translateY(-2px)}
.btn--lg{font-size:clamp(1.05rem,.9rem + .5vw,1.25rem);padding:1.05em 2.2em}
.btn:active{transform:scale(.96)}

/* ---------- header fixo ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--header-h);display:flex;align-items:center;
  background:color-mix(in srgb,var(--c-forest) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-n200);transition:height .3s var(--ease),background .3s var(--ease)}
.site-header.is-scrolled{height:calc(var(--header-h) - 10px);background:color-mix(in srgb,var(--c-forest) 96%,transparent)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-family:var(--font-display);font-weight:800;font-size:16px;line-height:1.15;color:var(--c-white);
  display:inline-block;max-width:min(56vw,320px);text-wrap:balance}
.brand span{color:var(--c-lime)}
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px)}
.nav a{position:relative;font-size:.9rem;font-weight:500;color:color-mix(in srgb,var(--c-white) 82%,transparent);transition:color .2s}
.nav a:not(.nav__cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--c-lime);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover,.nav a[aria-current="true"]{color:var(--c-lime)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.nav .nav__cta{background:var(--c-green);color:var(--c-on-green);font-weight:700;padding:10px 22px;border-radius:var(--r-sm)}
.nav .nav__cta:hover{background:var(--c-lime);color:var(--c-on-green)}
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--c-white)}
.burger svg{width:26px;height:26px}
@media (max-width:900px){.nav{display:none}.burger{display:inline-flex}}

/* ---------- menu mobile off-canvas ---------- */
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.drawer__scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--c-forest) 72%,transparent);opacity:0;transition:opacity .35s var(--ease)}
.drawer__panel{position:absolute;inset:0 0 0 auto;width:min(88vw,400px);background:var(--c-green);
  display:flex;flex-direction:column;gap:8px;padding:calc(var(--header-h) + 8px) 32px 40px;overflow-y:auto;
  transform:translateX(100%);transition:transform .45s var(--ease)}
.drawer__close{position:absolute;top:14px;right:16px;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;color:var(--c-forest);border-radius:var(--r-sm)}
.drawer__close svg{width:24px;height:24px}
.drawer__panel a{font-family:var(--font-display);font-weight:800;font-size:1.7rem;line-height:1.2;padding:10px 0;
  border-bottom:1px solid var(--c-line-green);color:var(--c-forest)}
.drawer__panel a:hover{color:var(--c-white)}
.drawer__panel .drawer__cta{margin-top:18px;border:0;background:var(--c-forest);color:var(--c-lime);padding:16px 22px;border-radius:var(--r-sm);font-size:1.25rem}
.drawer__panel :focus-visible{outline-color:var(--c-forest)}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
html.is-locked{overflow:hidden}
@media (prefers-reduced-motion: reduce){.drawer__panel,.drawer__scrim{transition:none}}

/* ---------- rodapé ---------- */
.site-footer{background:var(--c-forest);border-top:1px solid var(--c-n200);padding-block:44px}
.site-footer .container{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.site-footer p{font-size:.9rem;color:color-mix(in srgb,var(--c-white) 60%,transparent)}
.site-footer .ft__brand{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:color-mix(in srgb,var(--c-white) 88%,transparent);margin-bottom:4px}
.site-footer .ft__brand span,.site-footer a{color:var(--c-lime)}
.site-footer .ft__claim{font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:.02em;color:var(--c-green)}
.site-footer a{overflow-wrap:anywhere}
.site-footer a:hover{text-decoration:underline}

/* ---------- botão flutuante (→ #contato) ---------- */
.float-cta{position:fixed;right:24px;bottom:24px;z-index:55;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--c-green);color:var(--c-on-green);
  border:2px solid var(--c-forest);box-shadow:var(--shadow-green);transition:transform .25s var(--ease),background .25s var(--ease)}
.float-cta svg{width:28px;height:28px}
.float-cta:hover{transform:scale(1.08);background:var(--c-lime)}
html.is-locked .float-cta{visibility:hidden}
@media (max-width:560px){.float-cta{right:16px;bottom:16px;width:52px;height:52px}.float-cta svg{width:24px;height:24px}}

/* ---------- reveal (fail-safe) ----------
   Só esconde com html.js. Revelação por varredura de posição (scroll/resize/load/visibilitychange),
   não depende de IntersectionObserver. Sem JS ou com reduced-motion: tudo visível. */
.js [data-reveal]:not(.is-in){opacity:0;transform:translateY(26px)}
[data-reveal]{transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal][data-delay="1"]{transition-delay:.1s}
[data-reveal][data-delay="2"]{transition-delay:.2s}
[data-reveal][data-delay="3"]{transition-delay:.3s}
[data-reveal][data-delay="4"]{transition-delay:.4s}
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]:not(.is-in){opacity:1;transform:none}
  [data-reveal]{transition:none}
}