/* ==========================================================================
   LMC — Liga Monstro Combate — Global Stylesheet
   Design tokens imported from the LMC Design System (claude.ai/design).
   Loaded on every page: tokens + navbar + footer + cookie banner + back-to-top.
   ========================================================================== */

/* ---- Fonts ---- */
@font-face{font-family:"Bebas Neue";src:url("../fonts/BebasNeue-Thin.otf") format("opentype");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url("../fonts/BebasNeue-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url("../fonts/BebasNeue-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url("../fonts/BebasNeue-Book.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url("../fonts/BebasNeue-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
/* Novusa is used for one display moment per page (hero numeral/wordmark);
   font-display:swap on a display face there is exactly what causes a
   visible flash to the fallback font and back. block + preload instead. */
@font-face{font-family:"Novusa";src:url("../fonts/Novusa-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Evil Empire";src:url("../fonts/EvilEmpire.otf") format("opentype");font-weight:400;font-style:normal;font-display:block}

/* ---- Design tokens (LMC Design System) ---- */
:root{
  /* edition 1 (launch) palette */
  --e1-black:#010101;--e1-white:#ffffff;--e1-green:#15cf41;--e1-green-strong:#11bb39;--e1-green-bright:#13f248;
  /* edition 2 (current) palette */
  --e2-black:#010101;--e2-white:#ffffff;--e2-green:#13f248;--e2-sage:#40544b;

  --green-50:#e9fcee;--green-100:#c7f7d3;--green-200:#8fedaa;--green-300:#54e07f;--green-400:#28d35c;
  --green-500:#15cf41;--green-600:#11bb39;--green-700:#0c832a;--green-800:#095f1f;--green-900:#063f15;
  --green-bright:#13f248;--sage-600:#40544b;

  --black-950:#010101;--black-900:#0a0a0a;--black-800:#131513;--black-700:#1c1f1c;
  --gray-600:#3a3f3a;--gray-500:#5b615b;--gray-400:#83897f;--gray-300:#aeb3ab;--gray-200:#d3d6d1;--gray-100:#eceeea;
  --white:#ffffff;
  --red-500:#e5484d;--red-600:#c8353a;
  --amber-500:#f5a524;
  --blue-500:#3b82f6;--blue-600:#1f6feb;
  --gold-500:#d4af37;--gold-600:#8a6d1f;

  --fg-primary:var(--white);--fg-secondary:var(--gray-300);--fg-muted:var(--gray-500);--fg-on-light:var(--black-950);
  --fg-brand:var(--green-500);--fg-brand-2:var(--green-bright);

  --surface-app:var(--black-950);--surface-raised:var(--black-800);--surface-sunken:#000000;--surface-overlay:rgba(1,1,1,.85);
  --surface-inverse:var(--white);

  --border-subtle:var(--gray-600);--border-strong:var(--green-500);
  --accent-success:var(--green-500);--accent-danger:var(--red-500);--accent-warning:var(--amber-500);

  --text-display-1:clamp(3.5rem,7vw,7rem);--text-display-2:clamp(2.75rem,5.5vw,4.75rem);--text-display-3:clamp(2.25rem,4.5vw,3.5rem);
  --text-h1:2.25rem;--text-h2:1.75rem;--text-h3:1.875rem;--text-h4:1.5rem;
  --text-body-lg:1.25rem;--text-body:1rem;--text-body-sm:.875rem;--text-caption:.75rem;--text-eyebrow:.8125rem;
  --leading-tight:1.02;--leading-snug:1.15;--leading-normal:1.5;--leading-relaxed:1.65;
  --tracking-display:.06em;--tracking-eyebrow:.14em;--tracking-normal:0;--tracking-cta:.06em;
  --weight-thin:100;--weight-light:300;--weight-regular:400;--weight-book:500;--weight-bold:700;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
  --radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-full:999px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.4);--shadow-md:0 8px 24px rgba(0,0,0,.5);--shadow-glow:0 0 0 1px rgba(21,207,65,.4),0 0 24px rgba(21,207,65,.25);
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --duration-fast:120ms;
  --duration-normal:220ms;
  --header-height:68px;

  --font-display:"Novusa",-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Bebas Neue and Novusa are display faces with no real lowercase glyphs
     (typed lowercase still renders as caps) — fine for short headlines,
     unreadable for running text. Body copy, nav, buttons and labels use a
     normal UI sans-serif so mixed-case text actually reads as mixed case. */
  --font-body:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* Shared components always use the LMC design-system fonts, even on pages
   (like the LMC1 event page) that redefine --font-body/--font-display in
   their own :root for their own protected page content. */
.site-header,.site-footer,.cookie-banner,.back-to-top{
  --font-display:"Novusa",-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Bebas Neue and Novusa are display faces with no real lowercase glyphs
     (typed lowercase still renders as caps) — fine for short headlines,
     unreadable for running text. Body copy, nav, buttons and labels use a
     normal UI sans-serif so mixed-case text actually reads as mixed case. */
  --font-body:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

/* ---- Skip link (keyboard/screen-reader users bypass the nav) ---- */
.skip-link{
  position:absolute;top:-100%;left:var(--space-4);z-index:3000;
  background:var(--green-500);color:var(--black-950);
  font-family:var(--font-body);font-weight:700;font-size:14px;
  padding:10px 18px;border-radius:var(--radius-sm);
  transition:top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus{top:var(--space-4)}

/* ---- Visible keyboard focus ring (mouse/touch stay clean via :focus-visible) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--green-500);outline-offset:2px;
}
body{
  margin:0;
  background:var(--surface-app);
  color:var(--fg-primary);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--leading-normal);
}
/* Only labels/eyebrows/CTAs/badges are uppercase (declared on their own classes below).
   Headings use the readable body font and normal sentence case — Bebas Neue/Novusa
   are display faces with no lowercase glyphs, reserved for the brand wordmark (h1)
   and big poster-style section headlines (.section-title), never for running text. */
h1,h2,h3,h4{margin:0;font-family:var(--font-body);font-weight:700;letter-spacing:0}
h1{font-family:var(--font-display);font-size:var(--text-display-1);letter-spacing:var(--tracking-display);line-height:var(--leading-tight);text-transform:uppercase}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-6)}

/* ---- Inline SVG icons (replaces Font Awesome CDN) ----
   Sized/colored like an icon-font glyph so no per-usage overrides were
   needed when swapping <i class="fa..."> for <svg class="icon"><use>. */
.icon{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-0.125em}

/* ==========================================================================
   BUTTONS — the angled "tab" CTA, in exactly two flavours:
     .btn-tab          filled, one solid green
     .btn-tab-outline  transparent centre, one green stroke
   (.btn-primary / .btn-secondary are kept as aliases of those two so older
   markup keeps working; there is no third look.)

   Two constraints shape the implementation:

   1. The parallelogram is painted by a clipped layer *behind* the label
      instead of by clipping the button element itself. A clip-path on the
      element also crops its :focus-visible outline, which would leave
      keyboard users with no visible ring on the site's primary CTA.
   2. A real CSS border cannot follow a clip-path edge — the clip crops the
      box, it does not stroke the new diagonal. So the outline variant fakes
      its stroke with two stacked clipped layers, and needs --tab-bg set to
      whatever solid colour sits behind it (defaults to page black).
   ========================================================================== */
.btn{
  position:relative;z-index:0;
  font-family:var(--font-body);letter-spacing:.02em;font-weight:700;
  font-size:14px;padding:13px 26px;border:none;background:transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:color var(--duration-fast) var(--ease-standard);
}
.btn::before{
  content:"";position:absolute;z-index:-1;inset:0;
  background:var(--btn-fill,transparent);
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  transition:background-color var(--duration-fast) var(--ease-standard);
}

/* ---- Filled ---- */
.btn-tab,.btn-primary{color:var(--black-950);--btn-fill:var(--green-500)}
.btn-tab:hover,.btn-primary:hover{--btn-fill:var(--green-400)}
.btn-tab:active,.btn-primary:active{--btn-fill:var(--green-600)}

/* ---- Outline ---- */
.btn-tab-outline,.btn-secondary{color:var(--fg-primary)}
.btn-tab-outline::after,.btn-secondary::after{content:"";position:absolute;z-index:-2;inset:0;background:var(--green-500);clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:background-color var(--duration-fast) var(--ease-standard)}
.btn-tab-outline::before,.btn-secondary::before{inset:1.5px;background:var(--tab-bg,var(--black-950));clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%)}
.btn-tab-outline:hover,.btn-secondary:hover{color:var(--white)}
.btn-tab-outline:hover::after,.btn-secondary:hover::after{background:var(--green-400)}
/* --green-500 is too light to read as text on white; the stroke stays. */
.section-light .btn-tab-outline,.section-light .btn-secondary{--tab-bg:var(--white);color:var(--black-950)}

/* ---- Badge ---- */
.badge{font-family:var(--font-body);font-size:12px;letter-spacing:.03em;font-weight:700;padding:4px 10px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;background:var(--green-500);color:var(--black-950);border:1px solid var(--green-500)}
/* ---- Angled outline status tag (e.g. "Próximo evento") — same fake-stroke
   construction as .btn-tab-outline, sized down for a label, never a fill;
   the rounded .badge above stays available for solid/filled tags. ---- */
.tag-tab{position:relative;display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--fg-primary);font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px 8px 20px;z-index:0}
.tag-tab::after{content:"";position:absolute;z-index:-2;inset:0;background:var(--green-500);clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.tag-tab::before{content:"";position:absolute;z-index:-1;inset:1.5px;background:var(--tab-bg,var(--black-950));clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.section-light .tag-tab{--tab-bg:var(--white);color:var(--black-950)}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--green-500);flex-shrink:0;animation:dot-pulse 1.4s ease-in-out infinite}
@keyframes dot-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.dot-live{animation:none}}

/* ---- Shared page sections (Home, Sobre a LMC, LMC 2, Legal, etc.) ---- */
.section{padding:var(--space-24) 0}
.section-alt{background:var(--black-900)}
.section-light{background:var(--white);color:var(--black-950)}
.section-light .section-eyebrow span{color:var(--gray-500)}
.section-light .section-title{color:var(--black-950)}
.section-light .section-lede{color:var(--gray-600)}
.section-eyebrow{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}
.section-eyebrow.center{justify-content:center}
.section-eyebrow .rule{width:36px;height:2px;background:var(--green-500);flex-shrink:0}
.section-eyebrow span{font-family:var(--font-body);font-size:var(--text-eyebrow);letter-spacing:.02em;color:var(--fg-secondary);font-weight:700}
.section-title{font-family:var(--font-display);font-size:var(--text-display-3);letter-spacing:var(--tracking-display);margin-bottom:var(--space-6);max-width:720px}
.section-title .accent{color:var(--green-500)}
.section-lede{font-size:var(--text-body-lg);color:var(--fg-secondary);line-height:var(--leading-relaxed);max-width:560px;margin-bottom:var(--space-8)}
.badge-neutral{background:var(--black-700);color:var(--fg-primary);border-color:var(--border-subtle)}

/* ==========================================================================
   MEDIA FRAME — a solid accent block peeking out from behind an image's top
   edge and one lateral edge, for support photos that sit beside body copy
   (never on full-bleed hero photography). Wrap the existing media box:
     <div class="media-frame"><div class="about-media">...photo...</div></div>
   The accent square is the same size as the photo, offset up + to one side,
   so only a sliver shows past the photo's own edges. Default peeks toward
   the top-right (photo sits at the end of a text+media row); add
   `.media-frame--left` when the photo is the first/left column instead, so
   the accent peeks away from the body copy rather than under it. ---- */
/* isolation:isolate pins the accent's z-index:-1 to *this* stacking context
   — without it, a negative z-index escapes to the nearest ancestor that
   already has one (varies by page), so the accent can end up painting
   behind unrelated content instead of just behind its own photo. */
.media-frame{position:relative;isolation:isolate}
.media-frame::before{
  content:"";position:absolute;z-index:-1;
  top:-18px;right:-18px;width:100%;height:100%;
  background:var(--frame-color,var(--green-500));border-radius:var(--radius-md);
}
.media-frame--left::before{right:auto;left:-18px}

/* ==========================================================================
   FIGHT CARD MODULE — hexagon fighter badge, bout row, ficha técnica modal.
   Shared by the LMC2 event page and any future card page: the hexagon
   (already the LMC mark) stands in for a fighter photo, every bout is a
   button that opens a tale-of-the-tape modal, and main-card/prelims share
   one visual weight by design (no separate compact tier). Mobile-first.
   ========================================================================== */
.hex{position:relative;flex-shrink:0;width:var(--hx-size,84px);height:calc(var(--hx-size,84px) * 1.1547);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:linear-gradient(155deg,var(--black-700),var(--black-950));display:flex;align-items:center;justify-content:center}
.hex::before{content:"";position:absolute;inset:2px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--black-900);z-index:0}
.hex span{position:relative;z-index:1;font-family:var(--font-body);font-weight:800;color:var(--green-500);font-size:calc(var(--hx-size,84px) * .32);letter-spacing:0}
/* Photo variant: same hexagon clip-path, filled with an athlete portrait
   instead of initials. Falls back to the initials hexagon automatically
   whenever an athlete has no `photo` field, so the row/modal layout never
   depends on photo availability. The green ring is the same accent the
   row already shows on hover, made permanent here so the portrait — dark
   photo background included — reads as separate from the hex's own black
   fill instead of bleeding into it. */
.hex--photo{background:var(--green-500)}
.hex--photo::before{content:none}
.hex--photo picture{display:block;position:absolute;inset:1.5px;width:auto;height:auto}
.hex--photo img{display:block;position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:var(--face-x,50%) var(--face-y,30%);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}

.bout-list{display:flex;flex-direction:column;gap:var(--space-4)}
.bout{
  --hx-size:88px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-5);
  background:var(--black-900);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  padding:var(--space-6);cursor:pointer;text-align:left;color:inherit;font:inherit;width:100%;
  transition:border-color var(--duration-normal) var(--ease-standard),transform var(--duration-normal) var(--ease-standard),background var(--duration-normal) var(--ease-standard);
  position:relative;overflow:hidden;
}
.bout:hover,.bout:focus-visible{border-color:var(--green-600);background:var(--black-800);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.bout:focus-visible{outline:none}
/* min-width:0: the two "1fr" grid tracks are only genuinely equal when
   neither fighter-col's default min-width:auto floor (set by its longest
   unbreakable word — fighter names vary in length) is allowed to push a
   track wider than its fair share. Left unset, the two tracks came out
   unequal per bout depending on the exact names, which shifted the "auto"
   middle column (and the VS inside it) away from the box's true centre —
   while .bout-badges above sits fixed at that true centre, so the two drifted
   apart depending on which fighters were in the row. */
.fighter-col{display:flex;align-items:center;gap:var(--space-4);min-width:0}
.fighter-col.right{flex-direction:row-reverse;text-align:right}
.fighter-name{display:flex;flex-direction:column;gap:2px}
.fighter-name .nick{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-500);font-weight:700}
.fighter-name .full{font-family:var(--font-body);font-weight:800;font-size:clamp(1.0625rem,1.9vw,1.5rem);color:var(--white)}
.bout-mid{text-align:center;padding:0 var(--space-2)}
/* VS is the row's focal point — the same Evil Empire treatment as the LMC1
   hero VS (display italic, brand-green glow, two diagonal tick marks either
   side), not a quiet caption between the fighters. */
.bout-mid .vs{font-family:"Evil Empire",var(--font-body);font-style:italic;font-weight:400;font-size:clamp(26px,3.4vw,40px);color:var(--green-bright);letter-spacing:0;text-shadow:0 0 20px rgba(19,242,72,.6);position:relative;display:inline-flex;align-items:center;justify-content:center;padding:0 16px}
.bout-mid .vs::before,.bout-mid .vs::after{content:"";position:absolute;width:11px;height:2px;background:var(--green-500);opacity:.5}
.bout-mid .vs::before{left:2px;transform:rotate(-45deg)}
.bout-mid .vs::after{right:2px;transform:rotate(-45deg)}
/* Category sits above VS (markup order swapped page-side) — margin-bottom
   now, not margin-top, since it's the leading element in that stack. 10px
   (not the original 6px) so it doesn't crowd the VS glow directly beneath
   it now that it's the closer of the two neighbours. */
.bout-mid .cat{display:block;margin-bottom:10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-300);white-space:nowrap}
.bout-tag{position:absolute;top:var(--space-4);left:var(--space-6);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--black-950);background:var(--green-500);padding:3px 9px;border-radius:var(--radius-sm)}
.bout.has-tag{padding-top:calc(var(--space-6) + 20px)}
@media (max-width:700px){
  .bout{grid-template-columns:1fr;text-align:center}
  .fighter-col,.fighter-col.right{flex-direction:column;text-align:center}
  .fighter-name .full{font-size:18px}
}

/* ---- Ficha técnica modal ---- */
.fc-modal-overlay{
  position:fixed;inset:0;z-index:3000;background:rgba(1,1,1,.78);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:var(--space-4);
  opacity:0;visibility:hidden;transition:opacity var(--duration-normal) var(--ease-standard),visibility var(--duration-normal);
}
.fc-modal-overlay.is-open{opacity:1;visibility:visible}
.fc-modal{
  width:100%;max-width:880px;max-height:88vh;overflow-x:hidden;overflow-y:auto;
  background:var(--black-900);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  transform:scale(.94) translateY(12px);transition:transform var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard),box-shadow var(--duration-normal) var(--ease-standard);
  position:relative;
}
.fc-modal-overlay.is-open .fc-modal{transform:scale(1) translateY(0);border-color:var(--green-600);box-shadow:0 0 0 1px rgba(21,207,65,.25),var(--shadow-md)}
/* Crown Fight bouts open with the modality's own gold accent instead of the
   site green — matches the gold border already on the closed box. */
.fc-modal-overlay.is-crown.is-open .fc-modal{border-color:var(--gold-500);box-shadow:0 0 0 1px rgba(212,175,55,.25),var(--shadow-md)}
.fc-modal-close{
  position:absolute;top:var(--space-4);right:var(--space-4);z-index:2;
  width:38px;height:38px;border-radius:50%;background:var(--black-800);border:1px solid var(--border-subtle);
  color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;
  transition:background var(--duration-fast) var(--ease-standard);
}
.fc-modal-close:hover{background:var(--green-500);color:var(--black-950);border-color:var(--green-500)}
.fc-modal-head{text-align:center;padding:var(--space-8) var(--space-6) var(--space-6);border-bottom:1px solid var(--border-subtle)}
.fc-modal-head .cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-500);font-weight:700}
.fc-modal-head h3{font-family:var(--font-body);font-weight:800;color:var(--white);font-size:clamp(1.25rem,3vw,1.75rem);text-transform:uppercase;margin-top:var(--space-2)}
.fc-tape{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-6);padding:var(--space-8) var(--space-6)}
/* min-width:0 on every grid/flex item below: their default min-width:auto
   otherwise refuses to shrink past the intrinsic (unbroken) width of the
   longest stat value, which forced the whole modal wider than the mobile
   viewport instead of letting the text wrap — the "tem que arrastar pro
   lado" bug. */
.tape-side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);min-width:0}
.tape-side .hex{--hx-size:140px}
.tape-side .name{font-family:var(--font-body);font-weight:800;font-size:20px;color:var(--white);text-transform:uppercase;overflow-wrap:break-word}
/* Corner as a bordered tag, not a colour-only caption glued to the name —
   the word "Corner vermelho/azul" still carries the meaning, colour is just
   reinforcement. */
.tape-side .nick{display:inline-flex;align-items:center;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border:1px solid currentColor;border-radius:var(--radius-sm);padding:3px 10px;margin-top:var(--space-3)}
.tape-side .nick.corner-red{color:var(--red-500)}
.tape-side .nick.corner-blue{color:var(--blue-500)}
.tape-stats{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:var(--space-2);min-width:0}
.tape-stat{display:flex;justify-content:space-between;gap:var(--space-3);font-size:12px;padding:6px 0;border-top:1px solid var(--border-subtle)}
.tape-stat .k{color:var(--gray-400);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
.tape-stat .v{color:var(--white);font-weight:700;text-align:right;min-width:0;overflow-wrap:break-word}
.tape-bio{color:var(--gray-400);font-size:12.5px;line-height:var(--leading-relaxed);margin-top:var(--space-2);overflow-wrap:break-word}
.tape-vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding-top:var(--space-8);min-width:0}
.tape-vs .x{font-family:"Evil Empire",var(--font-body);font-style:italic;font-weight:400;font-size:clamp(28px,4vw,42px);color:var(--green-bright);text-shadow:0 0 20px rgba(19,242,72,.6);position:relative;padding:0 18px}
.tape-vs .x::before,.tape-vs .x::after{content:"";position:absolute;width:12px;height:2px;background:var(--green-500);opacity:.5;top:50%}
.tape-vs .x::before{left:2px;transform:translateY(-50%) rotate(-45deg)}
.tape-vs .x::after{right:2px;transform:translateY(-50%) rotate(-45deg)}
@media (max-width:700px){
  .fc-tape{grid-template-columns:1fr;padding:var(--space-6) var(--space-5)}
  .tape-vs{padding:var(--space-4) 0;flex-direction:row}
}
/* Phones: the modal was sized for tablet/desktop (140px hex, full section
   padding) and simply overflowed a phone's viewport height, forcing a lot of
   scrolling to see it all. Scale the same layout down instead of changing
   it — smaller hex, tighter padding, a lower max-height so the close button
   and the top of the card are reliably still visible on open. */
@media (max-width:480px){
  .fc-modal-overlay{padding:var(--space-3)}
  .fc-modal{max-height:92vh;max-height:92svh}
  .fc-modal-head{padding:var(--space-6) var(--space-4) var(--space-4)}
  .fc-tape{padding:var(--space-5) var(--space-4);gap:var(--space-4)}
  .tape-side{gap:var(--space-3)}
  .tape-side .hex{--hx-size:96px}
  .tape-side .name{font-size:17px}
  .tape-vs{padding:var(--space-3) 0}
}
body.modal-open{overflow:hidden}

/* ==========================================================================
   HEADER / NAVBAR
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:transparent;
  backdrop-filter:none;
  border-bottom:1px solid transparent;
  margin-bottom:calc(-1 * var(--header-height));
  transition:background-color var(--duration-normal) var(--ease-standard),backdrop-filter var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard);
}
/* Transparent at rest (overlays the hero); gains a blurred surface once the
   page scrolls past it, toggled by global.js. */
.site-header.is-scrolled{
  background:var(--surface-overlay);
  backdrop-filter:blur(8px);
  border-bottom-color:var(--border-subtle);
}
/* Every hero in the current design system is a full-bleed dark photo (no more
   split white/photo hero), so the navbar never needs a light-background
   variant: .nav-links/.nav-social/.nav-toggle stay on --fg-primary (white) at
   rest AND scrolled, always readable against a dark hero or the blurred
   is-scrolled surface. (A prior nav-on-light light-hero variant lived here;
   removed with the home redesign that dropped the white hero panel it was
   for — reintroduce it deliberately if a future page needs a light hero.) */
/* Mobile-first base: off-canvas nav-links panel + hamburger toggle.
   @media (min-width:961px) below layers the desktop row nav + hover dropdown
   on top — nothing under 961px depends on that block. */
.navbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4);width:100%}
.nav-logo img{height:36px;width:auto}
/* height (not bottom:0) so the panel's size is computed fresh off the
   dynamic viewport unit every time it opens — bottom:0 anchored to a stale
   viewport-height snapshot from before a scroll-triggered browser-chrome
   resize (address bar hide/show), which is what left the panel rendering
   only "half" open after scrolling down, back up, then tapping the toggle.
   100vh stays as a fallback for browsers without dvh support. */
.nav-links{
  position:fixed;top:var(--header-height);left:0;right:0;z-index:1000;
  height:calc(100vh - var(--header-height));height:calc(100dvh - var(--header-height));
  background:var(--surface-app);display:flex;flex-direction:column;align-items:flex-start;
  padding:var(--space-6);gap:var(--space-4);margin:0;list-style:none;overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateX(100%);transition:transform var(--duration-normal) var(--ease-standard);
}
.nav-links.is-open{transform:translateX(0)}
.nav-links > li{position:relative;width:100%}
.nav-links a{font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-primary);padding:8px 0;transition:color var(--duration-fast) var(--ease-standard)}
.nav-links a:hover,.nav-links a.active{color:var(--green-500)}
.nav-dropdown{position:relative}
.nav-dropdown-menu{
  min-width:220px;margin-top:0;
  background:transparent;border:none;border-radius:var(--radius-md);
  box-shadow:none;padding:0 0 0 var(--space-3);display:none;flex-direction:column;gap:2px;
}
.nav-dropdown.is-open .nav-dropdown-menu{display:flex}
.nav-dropdown-menu a{padding:10px 12px;border-radius:var(--radius-sm);font-size:13px}
.nav-dropdown-menu a:hover{background:var(--black-700)}
.nav-social{display:flex;align-items:center;gap:var(--space-4)}
.nav-social a{color:var(--fg-secondary);font-size:16px;transition:color var(--duration-fast) var(--ease-standard)}
.nav-social a:hover{color:var(--green-500)}
.nav-toggle{display:block;background:none;border:none;color:var(--fg-primary);font-size:24px;cursor:pointer}

@media (min-width:961px){
  :root{--header-height:85px}
  .navbar{gap:clamp(var(--space-6),4vw,var(--space-16));padding:var(--space-5) clamp(var(--space-4),4vw,var(--space-16));justify-content:flex-start;min-width:0}
  .nav-logo img{height:44px}
  .nav-links{
    position:static;flex-direction:row;align-items:center;gap:clamp(var(--space-4),2.2vw,var(--space-8));
    height:auto;
    padding:0;overflow:visible;background:transparent;
    transform:none;transition:none;min-width:0;
  }
  .nav-links > li{width:auto}
  .nav-dropdown-menu{
    position:absolute;top:100%;left:0;margin-top:8px;
    background:var(--surface-raised);border:1px solid var(--border-subtle);
    box-shadow:var(--shadow-md);padding:var(--space-2);
  }
  /* Invisible bridge closes the hover gap between the trigger and the menu so
     the cursor doesn't lose :hover while crossing the visual 8px offset above. */
  .nav-dropdown::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:8px;display:none;
  }
  .nav-dropdown:hover::after,.nav-dropdown:focus-within::after{display:block}
  .nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:flex}
  .nav-social{margin-left:auto}
  .nav-toggle{display:none}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--surface-sunken);border-top:1px solid var(--border-subtle);padding:var(--space-16) 0 var(--space-8)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8);max-width:1200px;margin:0 auto;padding:0 var(--space-6)}
/* Logo + social icons are the only content in the first footer column, so
   centering the column centers the logo directly over the icon row instead
   of leaving it flush left while the (narrower) icon row sits centered
   under it. */
.footer-grid .footer-col:first-child{display:flex;flex-direction:column;align-items:center;text-align:center}
.footer-logo{height:48px;width:auto;margin-bottom:var(--space-4)}
.footer-col h4{font-size:13px;letter-spacing:.1em;color:var(--gray-400);margin-bottom:var(--space-4)}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.footer-col a{font-size:14px;color:var(--fg-secondary)}
.footer-col a:hover{color:var(--green-500)}
/* Mobile: every column reads as its own centred group, not just the first.
   The 3rd column (legal links) gets extra top margin so the nav-links group
   above it reads as visually separate, rather than one long undifferentiated
   list of links. */
@media (max-width:760px){
  .footer-col{display:flex;flex-direction:column;align-items:center;text-align:center}
  .footer-col:nth-child(3){margin-top:var(--space-6)}
}
/* "Preferências de cookies" is an action, not a destination, so it has to be
   a <button> — reset it to read exactly like the sibling links around it. */
.footer-col button{background:none;border:none;padding:0;margin:0;font-family:inherit;font-size:14px;line-height:inherit;color:var(--fg-secondary);text-align:left;cursor:pointer}
.footer-col button:hover{color:var(--green-500)}
.footer-social{display:flex;gap:var(--space-4);margin-top:var(--space-4)}
.footer-social a{color:var(--fg-secondary);font-size:18px}
.footer-social a:hover{color:var(--green-500)}
.footer-bottom{max-width:1200px;margin:var(--space-12) auto 0;padding:var(--space-6) var(--space-6) 0;border-top:1px solid var(--border-subtle);display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--space-3)}
/* text-align (not just the row's justify-content) so a line that wraps on
   narrow phones is centred on its own too, instead of the wrapped line
   sitting flush against whichever edge its own shrink-to-fit box lands on. */
.footer-bottom p{font-size:13px;color:var(--gray-400);text-align:center}
.footer-bottom-links{display:flex;gap:var(--space-6);list-style:none;margin:0;padding:0}
.footer-bottom-links a{font-size:13px;color:var(--gray-400)}
.footer-bottom-links a:hover{color:var(--green-500)}

@media (min-width:761px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-12)}
}

/* ==========================================================================
   COOKIE / LGPD CONSENT — discreet corner card + a full preferences modal
   (granular necessary/analytics/marketing toggles) rather than one big
   accept-only bar across the whole viewport.
   ========================================================================== */
/* 340px could not fit "Preferências · Rejeitar · Aceitar" on one row, so the
   actions wrapped and the auto-margin on the settings link left the two rows
   misaligned. The card is wider now and the row is explicitly nowrap — the
   bar grows rather than the buttons breaking. */
.cookie-banner{
  position:fixed;left:var(--space-4);right:auto;bottom:var(--space-4);z-index:2000;
  width:100%;max-width:430px;
  background:var(--black-900);border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-md);
  padding:var(--space-5);
  transform:translateY(calc(100% + var(--space-4)));opacity:0;
  transition:transform var(--duration-normal) var(--ease-standard),opacity var(--duration-normal) var(--ease-standard);
}
.cookie-banner.is-visible{transform:translateY(0);opacity:1}
.cookie-banner p{font-size:12.5px;color:var(--fg-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-4)}
.cookie-banner a{color:var(--green-500);text-decoration:underline}
.cookie-banner-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--space-4)}
.cookie-banner-actions .btn{flex-shrink:0;white-space:nowrap}
.cookie-banner-settings{background:none;border:none;padding:0;font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--gray-300);text-decoration:underline;cursor:pointer;margin-right:auto;white-space:nowrap}
.cookie-banner-settings:hover{color:var(--fg-primary)}
@media (max-width:600px){
  .cookie-banner{left:var(--space-3);right:var(--space-3);bottom:var(--space-3);max-width:none;padding:var(--space-4)}
  .cookie-banner p{font-size:12px;margin-bottom:var(--space-3)}
  .cookie-banner-actions{gap:var(--space-2)}
  .cookie-banner-actions .btn{padding:9px 16px;font-size:12.5px}
  .cookie-banner-settings{font-size:11px}
}
/* Below ~340px the three controls genuinely cannot share a row even at the
   reduced mobile sizing; the two buttons stay together and the settings
   link moves to its own line rather than splitting the pair. */
@media (max-width:339px){
  .cookie-banner-actions{flex-wrap:wrap;justify-content:flex-end}
  .cookie-banner-settings{width:100%;margin-right:0;text-align:left;order:-1}
}

/* ---- Cookie preferences modal ---- */
.cookie-modal-overlay{
  position:fixed;inset:0;z-index:2600;background:rgba(1,1,1,.78);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:var(--space-4);
  opacity:0;visibility:hidden;transition:opacity var(--duration-normal) var(--ease-standard),visibility var(--duration-normal);
}
.cookie-modal-overlay.is-open{opacity:1;visibility:visible}
/* 520px, not 460 — "Rejeitar não essenciais" + "Salvar preferências" have to
   share one row, same rule as the banner below the fold. */
.cookie-modal{
  width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  background:var(--black-900);border:1px solid var(--border-subtle);
  padding:var(--space-8) var(--space-6);position:relative;
  transform:scale(.95) translateY(10px);transition:transform var(--duration-normal) var(--ease-standard);
}
.cookie-modal-overlay.is-open .cookie-modal{transform:scale(1) translateY(0)}
.cookie-modal-close{position:absolute;top:var(--space-4);right:var(--space-4);width:34px;height:34px;border-radius:50%;background:var(--black-800);border:1px solid var(--border-subtle);color:var(--fg-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.cookie-modal-close:hover{background:var(--green-500);color:var(--black-950);border-color:var(--green-500)}
.cookie-modal h3{font-family:var(--font-body);font-weight:800;font-size:19px;color:var(--fg-primary);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:var(--space-3)}
.cookie-modal > p{color:var(--fg-secondary);font-size:13px;line-height:var(--leading-relaxed);margin-bottom:var(--space-6)}
.cookie-option{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--border-subtle)}
.cookie-option:last-of-type{border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-6)}
.cookie-option strong{display:block;font-size:13px;color:var(--fg-primary);margin-bottom:2px}
.cookie-option p{font-size:12px;color:var(--gray-400);line-height:var(--leading-relaxed);margin:0}
.switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch-track{position:absolute;inset:0;background:var(--black-700);border:1px solid var(--border-subtle);border-radius:var(--radius-full);transition:background var(--duration-fast) var(--ease-standard)}
.switch-track::before{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;background:var(--gray-400);border-radius:50%;transition:transform var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}
.switch input:checked + .switch-track{background:rgba(21,207,65,.25);border-color:var(--green-500)}
.switch input:checked + .switch-track::before{transform:translateX(16px);background:var(--green-500)}
.switch input:disabled{cursor:not-allowed}
.switch input:disabled + .switch-track{opacity:.6}
.switch input:focus-visible + .switch-track{outline:2px solid var(--green-500);outline-offset:2px}
.cookie-modal-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:flex-end}
.cookie-modal-actions .btn{white-space:nowrap}

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.back-to-top{
  position:fixed;right:var(--space-4);bottom:calc(var(--space-4) + 64px);z-index:1500;
  width:48px;height:48px;border-radius:var(--radius-full);
  background:var(--green-500);color:var(--black-950);border:none;
  display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--duration-normal) var(--ease-standard),transform var(--duration-normal) var(--ease-standard),background var(--duration-fast) var(--ease-standard);
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--green-400);box-shadow:var(--shadow-glow)}

@media (min-width:601px){
  .back-to-top{right:var(--space-6);bottom:var(--space-6)}
}
/* Below 601px the cookie banner spans (nearly) the full width instead of
   sitting left-anchored like on desktop, so on a first visit it sits right
   on top of the button in this same bottom-right corner — reading as "no
   back-to-top button on mobile" even though it's there, just covered. Push
   it above the banner for as long as the banner is on screen. */
@media (max-width:600px){
  .cookie-banner.is-visible ~ .back-to-top{bottom:calc(var(--space-3) + var(--cookie-banner-h, 190px) + var(--space-3))}
}