/* ============================================================
   UDOW TECNOLOGIA · base.css
   Reset, design tokens, tipografia, botões e utilitários globais.
   ============================================================ */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol,address{margin:0}
ul,ol{list-style:none;padding:0}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
address{font-style:normal}
sup{font-size:.55em;vertical-align:super;line-height:0}

/* ---------- 2. Tokens ---------- */
:root{
  /* Cores da identidade Udow */
  --lime:      #A7CF45;
  --lime-hi:   #BEDF66;
  --lime-dim:  #7FA136;
  --green:     #5F9349;
  --green-dk:  #3C6630;
  --pale:      #DDECB8;

  --ink:       #14171A;   /* fundo escuro cinematográfico */
  --ink-deep:  #0B0D0E;
  --ink-2:     #373435;   /* grafite da marca */
  --ink-3:     #6E7370;
  --ink-4:     #9AA09C;

  --paper:     #FFFFFF;
  --paper-2:   #F4F6F1;
  --paper-3:   #E9EDE3;

  --line:      rgba(20,23,26,.12);
  --line-soft: rgba(20,23,26,.07);
  --line-dk:   rgba(255,255,255,.13);
  --line-dk-2: rgba(255,255,255,.07);

  /* Contextuais (trocados por .band--dark) */
  --bg:        var(--paper);
  --fg:        var(--ink);
  --fg-2:      var(--ink-3);
  --rule:      var(--line);
  --accent:    var(--green);

  /* Tipografia */
  --sans: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Lora", Georgia, serif;
  /* Códigos e medidas em monoespaçada: é assim que ficha técnica se lê.
     Pilha do sistema, sem download extra. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --t-display: clamp(2.9rem, 8.4vw, 9rem);
  --t-h2:      clamp(2.1rem, 5.4vw, 4.7rem);
  --t-h3:      clamp(1.25rem, 1.9vw, 1.6rem);
  --t-lead:    clamp(1.02rem, 1.35vw, 1.22rem);
  --t-body:    1.0425rem;
  --t-small:   .875rem;
  --t-eyebrow: .705rem;

  /* Métrica */
  --wrap: 1360px;
  --gut: clamp(1.25rem, 4vw, 3.75rem);
  --sec-y: clamp(5.5rem, 11vw, 11rem);

  --r-card: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,.61,.29,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .72s;

  --hdr-h: 82px;
}

@media (max-width:860px){ :root{ --hdr-h:68px } }

/* ---------- 3. Documento ---------- */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--hdr-h);
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:450;
  line-height:1.68;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

::selection{background:var(--lime);color:var(--ink)}

/* ---------- 4. Bandas de tema ---------- */
.band--dark{
  --bg:var(--ink);
  --fg:#FFFFFF;
  --fg-2:rgba(255,255,255,.62);
  --rule:var(--line-dk);
  --accent:var(--lime);
  background:var(--ink);
  color:#fff;
}

/* ---------- 5. Tipografia ---------- */
.display{
  font-weight:900;
  font-size:var(--t-display);
  line-height:.85;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.display em{font-style:normal;color:var(--accent)}

.shead__title{
  font-weight:850;
  font-size:var(--t-h2);
  line-height:.94;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.shead__title em{font-style:normal;color:var(--accent)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--t-eyebrow);
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-2);
  line-height:1;
}
.eyebrow__dot{
  width:9px;height:9px;flex:0 0 9px;
  border-radius:3px;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.shead__lead{
  font-size:var(--t-lead);
  color:var(--fg-2);
  max-width:56ch;
  line-height:1.62;
}

/* ---------- 6. Marca em blocos ----------
   O SVG é inline em cada uso (e não via <use>) porque o shadow tree
   de <use> não recebe as regras deste arquivo. Os fills também vão
   como atributo, de forma que a marca sobreviva sem CSS. */
.mark{width:auto;color:var(--ink-2)}
.mark .mk--lime{fill:var(--lime)}
.mark .mk--pale{fill:var(--pale)}
.mark .mk--dark{fill:currentColor}
.mark .mk-wire{stroke:currentColor}
.band--dark .mark,
.hdr[data-theme="dark"] .mark,
.menu .mark{color:#fff}

/* ---------- 7. Botões ---------- */
.btn{
  --btn-bg:var(--lime);
  --btn-fg:var(--ink);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5em;
  height:56px;
  padding:0 1.9rem;
  border-radius:var(--r-pill);
  font-weight:800;
  font-size:.94rem;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  will-change:transform;
}
.btn span{position:relative;z-index:2;transition:color .35s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--btn-bg);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.btn--solid{color:var(--btn-fg)}
.btn--solid:hover{box-shadow:0 14px 40px -14px color-mix(in srgb, var(--lime) 70%, transparent)}
.btn--solid:hover::after{transform:translateY(0)}
.btn--solid:hover span{color:#fff}

.btn--ghost{color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--rule)}
.btn--ghost::before{background:transparent}
.btn--ghost::after{background:var(--lime)}
.btn--ghost:hover::after{transform:translateY(0)}
.btn--ghost:hover span{color:var(--ink)}

.btn--sm{height:44px;padding:0 1.25rem;font-size:.84rem}

.btn:focus-visible,
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
}

/* ---------- 8. Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{
  font-size:.78rem;font-weight:700;letter-spacing:.01em;
  padding:.42rem .82rem;
  border-radius:var(--r-pill);
  color:var(--fg-2);
  box-shadow:inset 0 0 0 1px var(--rule);
}

/* ---------- 9. Utilitários ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.skip{
  position:fixed;top:-100px;left:1rem;z-index:999;
  background:var(--lime);color:var(--ink);
  padding:.7rem 1.1rem;border-radius:10px;font-weight:800;
  transition:top .25s;
}
.skip:focus{top:1rem}

/* grão de filme */
.grain{
  position:fixed;inset:-120%;z-index:9998;pointer-events:none;
  opacity:.15;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}

/* cursor customizado (só desktop com ponteiro fino) */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block;position:fixed;top:0;left:0;z-index:9999;
    pointer-events:none;mix-blend-mode:difference;
    transform:translate3d(-100px,-100px,0);
  }
  /* escala via transform: sem reflow a cada frame */
  .cursor i{
    display:block;width:26px;height:26px;margin:-13px 0 0 -13px;
    border:1.5px solid #fff;border-radius:50%;
    transform:scale(1);
    transition:transform .3s var(--ease-out), background-color .28s, opacity .3s;
  }
  .cursor.is-hot i{transform:scale(2.23);background:rgba(255,255,255,.18);border-width:.7px}
  .cursor.is-hidden i{opacity:0}
}

/* ---------- 10. Preloader ---------- */
.loader{
  position:fixed;inset:0;z-index:9997;
  display:grid;place-items:center;
  background:var(--ink-deep);
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader__inner{display:grid;justify-items:center;gap:1.6rem;padding:2rem}
.mark--loader{height:clamp(74px,11vw,118px);color:#fff}
.loader__bar{
  width:min(230px,52vw);height:2px;
  background:rgba(255,255,255,.14);overflow:hidden;border-radius:2px;
}
.loader__bar i{
  display:block;height:100%;width:100%;
  transform:scaleX(var(--p,0));
  transform-origin:0 50%;
  background:var(--lime);
  transition:transform .3s linear;
}
.loader__txt{
  font-size:.68rem;font-weight:800;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(255,255,255,.42);
}
html.is-loaded .loader{opacity:0;visibility:hidden;pointer-events:none}
html:not(.has-js) .loader{display:none}

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