/* =========================
   Base • Entomonitec (navy+green)
   Progressive enhancement: conteúdo visível sem JS
   ========================= */

/* Reset básico e tipografia do sistema */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html:focus-within{scroll-behavior:smooth}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height:1.6;
  color: var(--text);
  background:
    radial-gradient(1150px 550px at 85% -10%, rgba(7,28,54,.20), transparent 45%),
    radial-gradient(900px 500px at -10% 30%, rgba(12,80,50,.18), transparent 46%),
    var(--bg);
  min-height:100svh;
}

/* Paleta (claro) */
:root{
  --navy-900:#071a2f;
  --navy-800:#0a2542;
  --navy-700:#103055;
  --green-500:#10b981; /* emerald */
  --green-600:#0ea371;
  --green-700:#0b8c62;
  --mint-100:#e9fbf4;
  --sky-50:#f5f9ff;
  --bg:#ffffff;
  --surface:#ffffff;
  --muted:#f2f5f8;
  --text:#0f172a;
  --text-2:#334155;
  --border:rgba(2,6,23,.10);
  --radius:14px;
  --container:1200px;
}

/* Paleta (escuro) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#07121f;
    --surface:#0b1628;
    --muted:#0c1c2f;
    --text:#e6edf6;
    --text-2:#cbd5e1;
    --border:rgba(148,163,184,.18);
    --navy-900:#020b14;
    --navy-800:#081427;
    --navy-700:#0e1f3a;
    --green-500:#12d69a;
    --green-600:#12bf8a;
    --green-700:#10a779;
    --mint-100:#08231b;
    --sky-50:#08121f;
  }
}

img,svg{
  display:block;
  max-width:100%
}

a{
  color:inherit;
  text-decoration:none
}
::selection{background:rgba(16,185,129,.25)}

/* ===== Container e utilitários ===== */
.container{width:min(100% - 2rem, var(--container)); margin-inline:auto}
.section{padding:clamp(2.5rem,6vw,4rem) 0}
.section-head{text-align:center;margin-bottom:clamp(1.2rem,2.6vw,2rem)}
.section-head h1,.section-head h2{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.2}
.section-head p{color:var(--text-2)}
.muted{background:linear-gradient(180deg, var(--muted), transparent)}

/* ===== Header / Navbar ===== */
.site-header{
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(1.15) blur(6px);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  border-bottom:1px solid var(--border);
}
.site-header .container{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.8rem;
  padding-block:.75rem;
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.2px}
.brand .brand-mark{
  width:1.25rem;height:1.25rem;border-radius:6px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg, var(--green-600), var(--navy-700));
  box-shadow:0 6px 20px rgba(16,185,129,.28);
}
.brand .brand-text span{color:var(--green-600)}

.nav-toggle{
  display:none;width:42px;height:42px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border)
}
.nav-toggle .hamburger,
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after{
  content:"";display:block;width:22px;height:2px;background:currentColor;margin:auto;
  position:relative;transition:transform .25s ease, opacity .2s ease
}
.nav-toggle .hamburger::before{position:absolute;transform:translateY(-7px)}
.nav-toggle .hamburger::after{position:absolute;transform:translateY(7px)}

.nav ul{
  display: flex;
  gap: .4rem;
  list-style: none; /* remove as bolinhas */
  margin: 0;
  padding: 0;
}

/* Ícone nos links da nav: herda a cor */
.nav a svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
}

.nav a.social-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-inline: .7rem .9rem; /* leve ajuste de respiro */
}

/* wrapper do ícone para o glow no hover */
.ig-icon-wrap{
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

/* glow suave do gradiente (só aparece no hover/focus) */
.ig-icon-wrap .ig-glow{
  position: absolute;
  inset: -3px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f58529, #feda77, #dd2a7b, #8134af, #515bd4);
  filter: blur(6px);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.nav a.social-link:hover .ig-glow,
.nav a.social-link:focus-visible .ig-glow{
  opacity: .55;
}

/* Social tem mesmo hover dos demais; se quiser destaque extra, use: */
.nav a.social-link:hover{
  background:color-mix(in srgb, var(--green-600) 12%, transparent);
  border-color:color-mix(in srgb, var(--green-600) 24%, var(--border));
  transform:translateY(-1px);
}

/* garante que o SVG use o tamanho certo e herde bem layout */
.nav a.social-link svg{
  display: block;
  width: 18px;
  height: 18px;
}

.nav a{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.58rem .85rem;border-radius:10px;font-weight:700;letter-spacing:.2px;
  border:1px solid transparent;transition:background .25s ease,border-color .25s ease,transform .06s ease
}
.nav a:hover{
  background:color-mix(in srgb, var(--green-600) 10%, transparent);
  border-color:color-mix(in srgb, var(--green-600) 22%, var(--border));
  transform:translateY(-1px)
}

/* Mobile menu */
@media (max-width: 900px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .site-header .container{grid-template-columns:1fr auto}
  .nav{position:fixed;inset:64px 0 auto 0; background:var(--surface); border-bottom:1px solid var(--border);
       transform:translateY(-120%); transition:transform .28s ease}
  .nav ul{flex-direction:column;padding:.75rem}
  .nav.open{transform:translateY(0)}
  body.nav-open{overflow:hidden}
}

/* ===== Botões & interações ===== */
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:44px;padding:0 1rem;border-radius:12px;font-weight:800;letter-spacing:.2px;
  border:1px solid var(--border);background:var(--surface);
  transition:transform .06s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  will-change:transform, box-shadow;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn-primary{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg, var(--green-600), var(--navy-700));
  box-shadow:0 8px 22px rgba(16,185,129,.28);
}
.btn-primary:hover{transform:translateY(-1px) scale(1.03); box-shadow:0 14px 30px rgba(16,185,129,.36)}
.btn-ghost{background:var(--surface)}
.btn-ghost:hover{background:color-mix(in srgb, var(--green-600) 8%, var(--surface)); transform:translateY(-1px) scale(1.02)}

.badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.badge{
  font-size:.84rem;font-weight:800;letter-spacing:.2px;
  border:1px solid var(--border);padding:.34rem .6rem;border-radius:999px;background:var(--surface)
}

/* ===== Cards, grades e utilitários ===== */
.cards,.features,.steps{display:grid;gap:1rem}
.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.features{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1rem;box-shadow:0 6px 20px rgba(2,6,23,.04);
  transition:transform .12s ease, box-shadow .25s ease, border-color .25s ease;
  transform:translateZ(0);
}
.card:hover{
  transform:translateY(-3px) scale(1.02);
  border-color:color-mix(in srgb, var(--green-600) 20%, var(--border));
  box-shadow:0 16px 36px rgba(16,185,129,.18), 0 4px 14px rgba(2,6,23,.10);
}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid var(--border); padding:1.2rem 0;
  background:color-mix(in srgb, var(--surface) 86%, transparent);
}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.site-footer nav{display:flex;gap:.6rem;flex-wrap:wrap}
.site-footer nav a{padding:.35rem .6rem;border-radius:10px;border:1px solid transparent}
.site-footer nav a:hover{border-color:var(--border)}

/* ===== Reveal • Progressive Enhancement ===== */
/* Padrão: tudo visível (sem JS) */
.reveal{opacity:1;transform:none}
[data-reveal]{opacity:1;transform:none}

/* Com JS ativo: escondemos suavemente até entrar na viewport */
.has-reveal .reveal,
.has-reveal [data-reveal]{
  opacity:0;transform:translateY(12px);will-change:opacity,transform
}
.has-reveal .reveal.is-visible,
.has-reveal [data-reveal].is-visible{
  opacity:1;transform:translateY(0);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.65,.2,1);
  transition-delay:var(--reveal-delay,0ms)
}

/* Direções (valem para data-reveal também) */
[data-reveal="up"]{transform:translateY(14px)}
[data-reveal="down"]{transform:translateY(-14px)}
[data-reveal="left"]{transform:translateX(16px)}
[data-reveal="right"]{transform:translateX(-16px)}

/* Acessibilidade: respeita “reduzir animações” */
@media (prefers-reduced-motion: reduce){
  .has-reveal .reveal{opacity:1 !important;transform:none !important}
  .has-reveal .reveal.is-visible{transition:none !important}
  .btn:hover,.btn:active,.card:hover{transform:none !important;box-shadow:none !important}
}

/* ===== Hero e elementos globais usados em múltiplas páginas ===== */
.hero{padding:clamp(2.6rem,6vw,4.4rem) 0}
.hero-grid{display:grid;align-items:center;gap:clamp(1rem,3vw,2rem);grid-template-columns:1.2fr 1fr}
.hero-copy h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15}
.hero-copy .lead{margin-top:.8rem;color:var(--text-2)}
.grad{
  background:linear-gradient(135deg,var(--green-600),var(--navy-700));-webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-visual{position:relative}
.hero-image{
  border-radius:calc(var(--radius) + 2px);
  border:1px solid var(--border);
  box-shadow:0 20px 50px rgba(7,26,47,.28), 0 6px 18px rgba(2,6,23,.12)
}
.glass-card{
  position:absolute;right:6%;bottom:-8%;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  border:1px solid var(--border);backdrop-filter:blur(6px) saturate(1.1);
  border-radius:16px;padding:.9rem 1rem;max-width:min(90%, 340px);
  box-shadow:0 12px 36px rgba(7,26,47,.24)
}
.glass-card h3{margin-bottom:.25rem}
.glass-card p{color:var(--text-2);font-size:.98rem}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .glass-card{position:relative;right:auto;bottom:auto;margin-top:.8rem}
}