/* ═══════════════════════════════════════
   WoGL — World of GL
   wogl.io | worldofgl.com | mundogl.com
   hello@wogl.io | hola@mundogl.com

   Proprietary. All rights reserved.
   ═══════════════════════════════════════ */
/* The page of a WoGL house (14-oct, SEO phase 3, the Placard Gera chose): the product as a work on a
   wall — the words on the left, the live shader framed with its cartela on the right — and editorial
   sections below. The type chassis: Outfit for every word, JetBrains Mono for numbers and labels. */
@font-face { font-family: 'Outfit'; src: url('/fonts/outfit-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; src: url('/fonts/outfit-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); font-weight: 100 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { color-scheme: dark; --ink: #07050b; --raised: #0d0a12; --line: rgba(240, 232, 220, .1); --text: #efe8dc; --soft: rgba(240, 232, 220, .66); --quiet: rgba(240, 232, 220, .42); --gold: #e8c89a; --sans: Outfit, system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --wh-top: 64px; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--text); font: 300 16px/1.6 var(--sans); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.house-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; height: 64px; padding: 0 clamp(18px, 4vw, 48px); background: rgba(7, 5, 11, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.house-mark { font: 300 20px/1 var(--sans); letter-spacing: .18em; color: var(--gold); }
.house-bar .wgl-lang { margin-left: auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); }
.crumbs li + li::before { content: '·'; margin-right: 8px; }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(36px, 7vw, 96px) clamp(18px, 4vw, 48px); }
.hero h1 { margin-top: 18px; font: 300 clamp(48px, 7vw, 96px)/.92 var(--sans); letter-spacing: -.03em; }
.hero .kw { margin-top: 14px; font: 300 clamp(20px, 2.2vw, 28px)/1.2 var(--sans); color: var(--gold); }
.hero .lead { margin-top: 22px; max-width: 46ch; color: var(--soft); font-size: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 500 15px/1 var(--sans); }
.cta--gold { background: var(--gold); color: #120d08; }
.cta--line { border: 1px solid rgba(232, 200, 154, .45); color: var(--gold); }
.work { position: relative; margin: 0; aspect-ratio: 4 / 5; border: 1px solid rgba(232, 200, 154, .22); padding: 14px; background: #050308; }
.work .frame { width: 100%; height: calc(100% - 46px); overflow: hidden; }
.work canvas { display: block; width: 100%; height: 100%; }
.cartela { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; }
.spec { font: 400 12px/1.5 var(--mono); color: var(--soft); letter-spacing: .04em; }

.section { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 56px clamp(18px, 4vw, 48px); border-top: 1px solid var(--line); }
.section h2 { font: 300 26px/1.15 var(--sans); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.steps b { font: 400 13px/1.7 var(--mono); color: var(--gold); }
.steps h3 { font: 400 19px/1.3 var(--sans); }
.steps p { color: var(--soft); max-width: 60ch; }
details { border-top: 1px solid var(--line); padding: 18px 0; }
details:first-child { border-top: 0; padding-top: 0; }
summary { cursor: pointer; list-style: none; font: 400 17px/1.4 var(--sans); }
summary::-webkit-details-marker { display: none; }
details p { margin-top: 10px; color: var(--soft); max-width: 62ch; }

.rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.rooms a { display: grid; gap: 8px; padding: 26px; background: var(--ink); }
.rooms strong { font: 300 26px/1.1 var(--sans); }
.rooms .kw { color: var(--gold); font-size: 15px; }
.rooms p { color: var(--soft); font-size: 15px; }

.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.related a { padding: 28px clamp(18px, 4vw, 48px); background: var(--ink); }
.related strong { display: block; font: 400 18px/1.2 var(--sans); }
.related span { color: var(--quiet); font-size: 14px; }
.house-foot { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; padding: 34px clamp(18px, 4vw, 48px) 48px; border-top: 1px solid var(--line); font: 400 13px/1.4 var(--sans); color: var(--quiet); }
.house-foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.house-foot a:hover { color: var(--text); }
.house-foot small { margin-left: auto; font: 400 11px/1 var(--mono); letter-spacing: .1em; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .section { grid-template-columns: 1fr; gap: 18px; }
  .rooms, .related { grid-template-columns: 1fr; }
  .house-foot small { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }