/* ============================================================
   PdC Audiovisuais — Design System tokens
   "piso de cima" — the floor above. The wordmark lives on the
   threshold between two stacked bands: a magenta upper floor and
   a charcoal lower floor. Every token here serves that idea:
   sharp horizontal bands, a crossing line, type on the edge.
   ============================================================ */

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

:root {
  /* ---- Brand core (sampled from the logo) ---- */
  --pdc-magenta:        #BB1057;   /* upper floor */
  --pdc-charcoal:       #2E2D2D;   /* lower floor */
  --pdc-black:          #0B0B0B;
  --pdc-white:          #FFFFFF;

  /* ---- Magenta scale ---- */
  --magenta-bright:     #DA2570;   /* hover / energetic */
  --magenta-700:        #BB1057;   /* brand */
  --magenta-900:        #7E0B3B;   /* deep / pressed */
  --magenta-300:        #E893B4;   /* soft tint */
  --magenta-100:        #F8E2EB;   /* wash */

  /* ---- Warm neutral (ink) scale, rooted in the charcoal ---- */
  --ink-950:            #161515;
  --ink-900:            #1C1B1B;
  --ink-800:            #2E2D2D;   /* brand charcoal */
  --ink-700:            #403E3E;
  --ink-600:            #5A5757;
  --ink-500:            #7C7878;
  --ink-400:            #A19D9C;
  --ink-300:            #C7C2C1;
  --ink-200:            #E4E0DF;
  --ink-100:            #F1EEED;
  --paper:              #F7F4F3;   /* off-white */

  /* ---- Semantic ---- */
  --bg:                 var(--ink-950);
  --surface:            var(--ink-900);
  --surface-2:          var(--ink-800);
  --text:               #F3F0EF;
  --text-dim:           var(--ink-400);
  --text-faint:         var(--ink-600);
  --line:               rgba(255,255,255,0.10);
  --line-strong:        rgba(255,255,255,0.22);
  --accent:             var(--magenta-700);
  --accent-hover:       var(--magenta-bright);

  /* ---- Type ---- */
  --font-display: 'Jost', system-ui, sans-serif;       /* thin geometric — matches logo */
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;

  /* fluid display sizes */
  --fs-mega:   clamp(3.5rem, 11vw, 11rem);
  --fs-h1:     clamp(2.6rem, 6.5vw, 6rem);
  --fs-h2:     clamp(2rem, 4.5vw, 3.6rem);
  --fs-h3:     clamp(1.4rem, 2.6vw, 2.1rem);
  --fs-lead:   clamp(1.1rem, 1.6vw, 1.45rem);
  --fs-body:   1.0625rem;
  --fs-small:  0.875rem;
  --fs-micro:  0.75rem;

  --lh-tight:  1.02;
  --lh-snug:   1.18;
  --lh-body:   1.62;

  /* tracking — the logo is set wide; lean into it for display */
  --track-display: 0.04em;
  --track-wide:    0.22em;   /* labels, eyebrows */
  --track-mega:    0.01em;

  /* ---- Spacing (8pt base) ---- */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4rem;   --sp-7: 6rem;    --sp-8: 8rem;
  --sp-9: 12rem;

  /* ---- Radius — architectural, mostly sharp ---- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ---- The band: signature device ---- */
  --band-h: 0.62em;            /* how far the lower band rises behind text */
  --band-gap: 0.18em;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   0.35s;
  --dur:        0.6s;
  --dur-slow:   1.1s;
  --dur-reveal: 1.4s;

  --shadow-soft: 0 18px 50px -20px rgba(0,0,0,0.65);
  --shadow-lift: 0 30px 80px -30px rgba(0,0,0,0.8);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
}

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 300; margin: 0; }

::selection { background: var(--magenta-700); color: #fff; }

/* ============================================================
   Signature: the logo lockup
   Pixel-faithful reconstruction of the PdC mark. The bar boxes
   are taken EXACTLY from the original artwork (5067 x 1046):
     magenta  x[193,4945]  y[67,510]   (tall — the main floor)
     charcoal1 x[0,4831]   y[546,742]  (thin — text crosses into it)
     charcoal2 x[315,5066] y[777,997]  (thin — detached, offset)
   The white lettering is the real artwork (wordmark-text.png) laid
   over the bars, so geometry is never approximated.
   RULE: bars never touch, never align — gaps + horizontal stagger.
   ============================================================ */
.lockup {
  position: relative;
  width: 100%;
  aspect-ratio: 5067 / 1046;
  isolation: isolate;
}
.lockup .bar { position: absolute; transform-origin: left center; }
.lockup .bar-mag { left: 3.81%;  top: 6.41%;  width: 93.78%; height: 42.35%; background: var(--magenta-700); }
.lockup .bar-c1  { left: 0;      top: 52.20%; width: 95.34%; height: 18.74%; background: var(--ink-800); }
.lockup .bar-c2  { left: 6.22%;  top: 74.28%; width: 93.76%; height: 21.03%; background: var(--ink-800); }
.lockup .bar-text { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 2; }

/* light-background variant (bars unchanged; text artwork is white,
   so on light surfaces use the supplied color/black logo PNG instead) */

.pdc-mark {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--track-display);
  line-height: 1;
  text-transform: lowercase;
  display: inline-block;
}

/* Inline "threshold" device for applying the brand pattern to
   arbitrary words. Echoes the logo proportions: a tall magenta
   block holding the body of the text, a thin charcoal bar at the
   baseline, separated by a gap and staggered horizontally. */
.pdc-threshold {
  position: relative;
  display: inline-block;
  padding: 0.12em 0.5em 0.42em;
  color: #fff;
  isolation: isolate;
}
.pdc-threshold > span { position: relative; z-index: 2; }
.pdc-threshold::before,    /* upper floor — magenta, tall */
.pdc-threshold::after {    /* lower floor — charcoal, thin */
  content: "";
  position: absolute;
  z-index: 1;
}
/* RULE: the two bars NEVER touch and NEVER share an edge. */
.pdc-threshold::before { top: 0;    height: 60%; left: 0;   right: 5%;  background: var(--magenta-700); }
.pdc-threshold::after  { top: 68%;  height: 30%; left: 7%;  right: -3%; background: var(--ink-800); }

/* ============================================================
   Reusable label / eyebrow
   ============================================================ */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: #fff; }

/* ============================================================
   Card
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-4);
}

/* ============================================================
   Utilities
   ============================================================ */
.wrap { width: min(1240px, 92vw); margin-inline: auto; }
.stack > * + * { margin-top: var(--sp-2); }