/* ============================================================
   PAHSOTO — Design System v3
   Neo-brutalist / streetwear. Black + lime, high-contrast.
   ============================================================ */

/* ---- Fontes locais: Bebas Neue ---- */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Fontes locais: Montserrat (todos os pesos) ---- */
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-Thin.ttf')              format('truetype'); font-weight:100; font-style:normal;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-ThinItalic.ttf')        format('truetype'); font-weight:100; font-style:italic;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-ExtraLight.ttf')        format('truetype'); font-weight:200; font-style:normal;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-ExtraLightItalic.ttf')  format('truetype'); font-weight:200; font-style:italic;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-Light.ttf')             format('truetype'); font-weight:300; font-style:normal;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-LightItalic.ttf')       format('truetype'); font-weight:300; font-style:italic;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-Regular.ttf')           format('truetype'); font-weight:400; font-style:normal;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-Italic.ttf')            format('truetype'); font-weight:400; font-style:italic;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-Medium.ttf')            format('truetype'); font-weight:500; font-style:normal;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-MediumItalic.ttf')      format('truetype'); font-weight:500; font-style:italic;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-SemiBold.ttf')          format('truetype'); font-weight:600; font-style:normal;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-SemiBoldItalic.ttf')    format('truetype'); font-weight:600; font-style:italic;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-Bold.ttf')              format('truetype'); font-weight:700; font-style:normal;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-BoldItalic.ttf')        format('truetype'); font-weight:700; font-style:italic;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-ExtraBold.ttf')         format('truetype'); font-weight:800; font-style:normal;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf')   format('truetype'); font-weight:800; font-style:italic;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-Black.ttf')             format('truetype'); font-weight:900; font-style:normal;  font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-BlackItalic.ttf')       format('truetype'); font-weight:900; font-style:italic;  font-display:swap; }

/* ============================================================
   TOKENS DE DESIGN
   ============================================================ */
:root {
  /* ---- Cores da marca ---- */
  --color-bg:           #000000;
  --color-surface:      #0d0d0d;
  --color-surface-2:    #1a1a1a;
  --color-surface-3:    #232323;
  --color-accent:       #DDFF88;        /* lime — cor principal */
  --color-accent-light: #E8FFAA;        /* lime hover */
  --color-accent-deep:  #C6EA5E;        /* lime pressed */
  --color-text:         #FFFFFF;
  --color-text-muted:   #888888;
  --color-text-dim:     #5a5a5a;
  --color-border:       #333333;
  --color-border-soft:  #1f1f1f;

  /* ---- Inversão (painel lime sobre fundo preto) ---- */
  --on-accent:          #000000;
  --on-accent-muted:    #1a1a1a;
  --on-accent-border:   #000000;

  /* ---- Status (usar raramente) ---- */
  --color-danger:       #FF4D4D;
  --color-info:         #7AB8FF;

  /* ---- Fontes ---- */
  --font-display: 'Bebas Neue', 'Anton', 'Oswald', Impact, sans-serif;
  --font-body:    'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Escala tipográfica display ---- */
  --fs-display-3xl: clamp(96px, 14vw, 220px);
  --fs-display-2xl: clamp(72px, 10vw, 160px);
  --fs-display-xl:  clamp(56px, 7.5vw, 120px);
  --fs-display-lg:  clamp(40px, 5.5vw, 88px);
  --fs-display-md:  clamp(32px, 4vw, 64px);
  --fs-display-sm:  clamp(24px, 2.6vw, 40px);

  --fs-body-xl:   22px;
  --fs-body-lg:   18px;
  --fs-body-md:   15px;
  --fs-body-sm:   13px;
  --fs-body-xs:   11px;

  --lh-display: 0.88;
  --lh-tight:   1.05;
  --lh-body:    1.5;

  --ls-display: -0.01em;
  --ls-eyebrow:  0.14em;

  /* ---- Raios ---- */
  --r-sharp:   0px;
  --r-xs:      4px;
  --r-sm:      8px;
  --r-md:      14px;
  --r-lg:      22px;
  --r-xl:      32px;
  --r-pill:    999px;

  /* ---- Espaçamento (px) ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---- Bordas ---- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-4: 4px;

  /* ---- Sombras (usar com parcimônia — marca é flat) ---- */
  --shadow-card:    0 12px 32px rgba(0,0,0,.55);
  --shadow-pop:     0 24px 60px rgba(0,0,0,.7);
  --glow-lime:      0 0 0 2px rgba(221,255,136,.45), 0 0 32px rgba(221,255,136,.25);
  --inset-hairline: inset 0 0 0 1px var(--color-border);

  /* ---- Motion ---- */
  --ease-snap: cubic-bezier(.2,.9,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    120ms;
  --t-med:     240ms;
  --t-slow:    480ms;

  /* ---- Layout ---- */
  --maxw-page: 1280px;
  --gutter:    24px;

  /* ============================================================
     ALIASES BACKWARD-COMPAT (usados em index.css / mediakit.css)
     ============================================================ */
  --color-primary:        var(--color-accent);
  --color-primary-light:  var(--color-accent-light);

  /* Escala rem legada */
  --text-xs:   0.6875rem;   /* ~11px */
  --text-sm:   0.8125rem;   /* ~13px */
  --text-base: 0.9375rem;   /* ~15px */
  --text-lg:   1.125rem;    /* ~18px */
  --text-xl:   1.375rem;    /* ~22px */
  --text-2xl:  2rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-5xl:  6rem;

  /* Espaçamento rem legado */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Raios legados */
  --radius-sm:   var(--r-xs);
  --radius-md:   var(--r-sm);
  --radius-lg:   var(--r-md);
  --radius-full: var(--r-pill);

  /* Sombras legadas */
  --shadow-sm:      0 2px 8px rgba(0,0,0,.6);
  --shadow-md:      0 4px 24px rgba(0,0,0,.8);
  --shadow-lg:      0 8px 48px rgba(0,0,0,.9);
  --shadow-accent:  var(--glow-lime);
  --shadow-primary: var(--glow-lime);

  /* Transições legadas */
  --transition-fast: var(--t-fast) var(--ease-snap);
  --transition-base: var(--t-med) var(--ease-snap);
  --transition-slow: var(--t-slow) var(--ease-snap);
}

/* ============================================================
   RESET E BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--color-accent);
  color: #000;
}

/* ============================================================
   TIPOGRAFIA — ROLES SEMÂNTICOS
   ============================================================ */
.display-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
}

.t-display-hero,
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  font-weight: 400;
}
.t-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl);  line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; }
.t-h2         { font-family: var(--font-display); font-size: var(--fs-display-lg);  line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; }
.t-h3         { font-family: var(--font-display); font-size: var(--fs-display-md);  line-height: var(--lh-tight);   letter-spacing: 0;                text-transform: uppercase; }
.t-h4         { font-family: var(--font-display); font-size: var(--fs-display-sm);  line-height: var(--lh-tight);   letter-spacing: 0;                text-transform: uppercase; }

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-body-xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.t-eyebrow--accent { color: var(--color-accent); }
.t-eyebrow--ink    { color: var(--on-accent); }

.t-lead   { font-family: var(--font-body); font-size: var(--fs-body-xl); font-weight: 400; line-height: 1.4; }
.t-body   { font-family: var(--font-body); font-size: var(--fs-body-md); font-weight: 400; line-height: var(--lh-body); }
.t-body-lg{ font-family: var(--font-body); font-size: var(--fs-body-lg); font-weight: 400; line-height: 1.55; }
.t-body-sm{ font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 400; line-height: 1.5; }
.t-caption{ font-family: var(--font-body); font-size: var(--fs-body-xs); font-weight: 500; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.t-mono   { font-family: var(--font-mono); font-size: var(--fs-body-sm); letter-spacing: .02em; }

.t-strike  { text-decoration: line-through; text-decoration-thickness: 3px; }
.t-italic  { font-style: italic; }
.t-w-900   { font-weight: 900; }
.t-w-700   { font-weight: 700; }

/* Modificadores de cor */
.text-accent        { color: var(--color-accent); }
.text-accent-light  { color: var(--color-accent-light); }
.text-muted         { color: var(--color-text-muted); }
.t-ink              { color: var(--color-text); }
.t-dim              { color: var(--color-text-muted); }
.t-lime             { color: var(--color-accent); }
.t-black            { color: #000; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12.5px 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1.5px solid #fff;
  background: transparent;
  color: #fff;
  transition: border-color var(--t-fast) var(--ease-snap),
              color        var(--t-fast) var(--ease-snap),
              background   var(--t-fast) var(--ease-snap),
              transform 80ms;
}
.btn:hover  { border-color: var(--color-accent); color: var(--color-accent); }
.btn:active { background: var(--color-accent); color: #000; border-color: var(--color-accent); transform: scale(.985); }

.btn-primary {
  background: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
}
.btn-primary:hover  { background: var(--color-accent-light); border-color: var(--color-accent-light); color: #000; }
.btn-primary:active { background: var(--color-accent-deep); transform: scale(.985); }

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--s-5);
  transition: border-color var(--t-fast) var(--ease-snap);
}
.card:hover { border-color: var(--color-accent); }

.card-lime {
  background: var(--color-accent);
  color: #000;
  border-radius: var(--r-xl);
  padding: var(--s-6);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--s-9) 0;
}

/* ============================================================
   MARQUEE / FAIXA INCLINADA
   ============================================================ */
.tape {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent);
  color: #000;
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

/* ============================================================
   GRAIN OVERLAY
   ============================================================ */
.grain::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.35;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-4) 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.95), transparent);
  backdrop-filter: blur(8px);
  transition: background var(--t-med) var(--ease-snap);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-logo-img {
  width: 72px;
  height: 72px;
  border-radius: var(--r-pill);
  object-fit: cover;
}

.nav-logo-text {
  font-size: var(--text-3xl);
  color: var(--color-text);
  font-weight: 100;
  letter-spacing: 0.01em;
  font-family: var(--font-display);
  text-transform: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-link-btn {
  font-size: clamp(0.6rem, 1vw, var(--text-xs));
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}

/* ============================================================
   SEÇÃO CONTATO — componente compartilhado (index + mediakit)
   ============================================================ */
.section-contact-green {
  background: var(--color-accent);
  color: #000;
  padding: 34px 0 42px;
}

.cg-title {
  font-size: clamp(44px, 9vw, 104px);
  color: #000;
  line-height: 0.87;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.cg-rows {
  margin-bottom: 24px;
}

.cg-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 0;
  border-top: 1.5px solid rgba(0,0,0,.14);
  text-decoration: none;
  color: #000;
}

.cg-row:last-child {
  border-bottom: 1.5px solid rgba(0,0,0,.14);
}

.cg-key {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(0,0,0,.4);
}

.cg-val {
  font-family: var(--font-display);
  font-size: clamp(16px, 3.4vw, 34px);
  line-height: 1;
  letter-spacing: .01em;
  color: #000;
}

.cg-row:hover .cg-val {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cg-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  background: #000;
  color: var(--color-accent);
  padding: 8px 20px 6px;
  border: none;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--t-fast) var(--ease-snap), color var(--t-fast) var(--ease-snap);
}

.cg-btn:hover {
  background: #ffffff;
  color: #000;
}