/* =========================================================================
   AMPERA — Design System (tokens compartilhados)
   Cooperativa Ampera Energia · Energia inteligente
   Usado por: index.html (landing), brandbook.html, apresentacao.html
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* --- Cores de marca --- */
  --navy-950:#0A0E1F;   /* fundo principal */
  --navy-900:#0E1430;   /* fundo alternativo */
  --navy-850:#111634;   /* surface */
  --navy-800:#1A2148;   /* card */
  --navy-700:#232C5C;   /* card hover / borda forte */

  --azul:#3E7BFA;       /* primária */
  --azul-claro:#5BA8F5; /* bright */
  --roxo:#6A4FC4;       /* secundária */
  --roxo-claro:#8C6BE6;

  --branco:#FFFFFF;
  --off-white:#EEF1FB;  /* texto sobre navy */
  --cinza-azul:#9AA3C0; /* texto secundário */
  --cinza-azul-2:#6B739A;

  --linha:rgba(255,255,255,.10);
  --linha-2:rgba(255,255,255,.06);

  /* --- Gradientes --- */
  --grad-a:linear-gradient(135deg,#4FA3E8 0%,#6A4FC4 100%);          /* símbolo / CTA */
  --grad-hero:radial-gradient(120% 120% at 15% 10%,#1B2C66 0%,#0A0E1F 55%);
  --grad-faixa:linear-gradient(120deg,#3E7BFA 0%,#6A4FC4 100%);

  /* --- Tipografia --- */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  /* --- Raios / sombras --- */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --sh-card:0 10px 30px rgba(5,8,22,.45);
  --sh-glow:0 18px 50px rgba(62,123,250,.28);

  /* --- Espaçamento base (8pt) --- */
  --maxw:1200px;
}

/* --------------------------- Reset enxuto --------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--off-white);
  background:var(--navy-950);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;font-weight:600;letter-spacing:-.01em}

/* ------------------------------ Logo ------------------------------- */
/* Símbolo "A" reutilizável: defina <svg class="amp-defs"> uma vez no body.   */
.amp-defs{position:absolute;width:0;height:0;overflow:hidden}

.amp-mark{width:42px;height:42px;flex:0 0 auto}
.amp-mark use{fill:none}

.logo{display:inline-flex;align-items:center;gap:14px}
.logo .wordmark{display:flex;flex-direction:column;line-height:1}
.logo .wordmark .name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.55rem;
  letter-spacing:.34em;
  text-indent:.34em;        /* compensa o tracking pra centralizar */
  color:var(--branco);
}
.logo .wordmark .tag{
  font-family:var(--font-display);
  font-weight:400;
  font-size:.50rem;
  letter-spacing:.42em;
  text-indent:.42em;
  color:var(--azul-claro);
  margin-top:7px;
}
.logo.sm .amp-mark{width:30px;height:30px}
.logo.sm .wordmark .name{font-size:1.1rem;letter-spacing:.30em;text-indent:.30em}
.logo.sm .wordmark .tag{font-size:.42rem}
.logo.lg .amp-mark{width:74px;height:74px}
.logo.lg .wordmark .name{font-size:2.7rem}
.logo.lg .wordmark .tag{font-size:.82rem;margin-top:12px}

/* Variante para fundos claros */
.on-light .logo .wordmark .name{color:var(--navy-950)}
.on-light .logo .wordmark .tag{color:var(--roxo)}

/* ------------------------- Utilitários comuns ---------------------- */
.grad-text{
  background:var(--grad-faixa);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.eyebrow{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  font-weight:600;
  color:var(--azul-claro);
}
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  padding:.85em 1.6em;border-radius:999px;border:0;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-primary{background:var(--grad-a);color:#fff;box-shadow:var(--sh-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 60px rgba(62,123,250,.42)}
.btn-ghost{background:transparent;color:var(--off-white);border:1px solid var(--linha)}
.btn-ghost:hover{border-color:var(--azul-claro);color:#fff}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}