/* =====================================================================
   LANCE — Design System · Paulinho dos Leilões
   v3.0 · Editorial brutalism, dark mode
   Base: Eindhoven Design District (invertido) · acento verde no lugar do vermelho
   ===================================================================== */

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

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root{
  /* Cores — invertidas para dark mode */
  --color-ink:#ffffff;            /* texto, bordas, traços (era Charcoal Ink) */
  --color-paper:#000000;          /* canvas principal (era Paper White) */
  --color-newsprint:#141414;      /* banda de seção alternada (era Newsprint Gray) */
  --color-pewter:#8c8c8c;         /* texto de apoio */
  --color-pewter-line:#3a3a3a;    /* divisores discretos */
  --color-signal-green:#00c805;   /* acento (era Signal Red) */
  --color-signal-green-hi:#3dff44;
  --color-on-green:#000000;

  /* Tipografia */
  --font-sans:'Helvetica Neue', 'Neue Haas Grotesk Text', Inter, Helvetica, Arial, sans-serif;
  --font-display:'Inter Tight', 'Helvetica Neue', Inter, sans-serif;
  --font-weight-regular:400;
  --font-weight-semibold:600;

  --text-caption:14px;    --leading-caption:1.4;    --tracking-caption:.015em;
  --text-body-sm:16px;    --leading-body-sm:1.4;    --tracking-body-sm:.005em;
  --text-body:18px;       --leading-body:1.31;      --tracking-body:-.004em;
  --text-card:19px;       --leading-card:1.2;
  --text-subheading:23px; --leading-subheading:1.2; --tracking-subheading:-.017em;
  --text-heading-sm:35px; --leading-heading-sm:1.15;--tracking-heading-sm:-.02em;
  --text-heading:46px;    --leading-heading:1;      --tracking-heading:-.03em;
  --text-heading-lg:50px; --leading-heading-lg:1;   --tracking-heading-lg:-.03em;
  --text-display:clamp(64px, 12.5vw, 180px); --leading-display:.93; --tracking-display:-.05em;

  /* Espaço */
  --spacing-8:8px; --spacing-10:10px; --spacing-12:12px; --spacing-15:15px; --spacing-16:16px;
  --spacing-18:18px; --spacing-20:20px; --spacing-25:25px; --spacing-30:30px; --spacing-35:35px;
  --spacing-40:40px; --spacing-50:50px; --spacing-100:100px;

  /* Layout */
  --page-max-width:1200px;
  --section-gap:clamp(64px, 9vw, 120px);
  --card-padding:20px;
  --element-gap:20px;
  --gutter:clamp(16px, 4vw, 40px);

  /* Raio — só 0 ou pill */
  --radius-full:500px;
  --radius-none:0px;

  /* Movimento — discreto */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:220ms;
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-sans);font-weight:400;
  font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--color-signal-green);color:var(--color-on-green)}
:focus-visible{outline:1px solid var(--color-ink);outline-offset:3px}

/* ---------------------------------------------------------------------
   3. TIPOGRAFIA
   --------------------------------------------------------------------- */
.display{font-family:var(--font-display);font-size:var(--text-display);line-height:var(--leading-display);letter-spacing:var(--tracking-display);font-weight:500}
.heading-lg{font-size:clamp(34px,5vw,var(--text-heading-lg));line-height:var(--leading-heading-lg);letter-spacing:var(--tracking-heading-lg);font-weight:400}
.heading{font-size:clamp(32px,4.6vw,var(--text-heading));line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);font-weight:400}
.heading-sm{font-size:clamp(26px,3.5vw,var(--text-heading-sm));line-height:var(--leading-heading-sm);letter-spacing:var(--tracking-heading-sm);font-weight:400}
.subheading{font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading);font-weight:400}
.body{font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body)}
.body-sm{font-size:var(--text-body-sm);line-height:var(--leading-body-sm);letter-spacing:var(--tracking-body-sm)}
.caption{font-size:var(--text-caption);line-height:var(--leading-caption);letter-spacing:var(--tracking-caption)}
.semibold{font-weight:600}
.muted{color:var(--color-pewter)}
.green{color:var(--color-signal-green)}
.num{font-variant-numeric:tabular-nums}
.measure{max-width:600px}
.balance{text-wrap:balance}

/* ---------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------- */
.container{width:100%;max-width:calc(var(--page-max-width) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.band{padding:var(--section-gap) 0;background:var(--color-paper)}
.band--newsprint{background:var(--color-newsprint)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--element-gap)}
.rule{border:0;border-top:1px solid var(--color-ink)}
.rule--muted{border-top-color:var(--color-pewter-line)}

/* ---------------------------------------------------------------------
   5. COMPONENTES
   --------------------------------------------------------------------- */

/* 5.1 Pill buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-10);border-radius:var(--radius-full);
  font-size:var(--text-body-sm);line-height:1;letter-spacing:var(--tracking-body-sm);font-weight:400;white-space:nowrap;
  padding:16px 20px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pill--sm{padding:10px 15px;font-size:var(--text-caption)}
.pill--lg{padding:20px 28px;font-size:var(--text-body)}
.pill--ghost{border:1px solid var(--color-ink);color:var(--color-ink);background:transparent}
.pill--ghost:hover{background:var(--color-ink);color:var(--color-paper)}
.pill--filled{border:1px solid var(--color-signal-green);background:var(--color-signal-green);color:var(--color-on-green)}
.pill--filled:hover{background:var(--color-signal-green-hi);border-color:var(--color-signal-green-hi)}
.pill--block{width:100%}
.pill .glyph{font-size:1.1em;line-height:0}

/* 5.2 Circle icon button */
.circle{width:40px;height:40px;flex-shrink:0;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--color-ink);transition:background var(--dur),color var(--dur)}
.circle:hover{background:var(--color-ink);color:var(--color-paper)}
.circle svg{width:16px;height:16px}

/* 5.3 Tag (outline verde) */
.tag{display:inline-flex;align-items:center;gap:var(--spacing-8);padding:8px 12px;border-radius:var(--radius-full);
  border:1px solid var(--color-signal-green);color:var(--color-signal-green);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);line-height:1}
.tag--ink{border-color:var(--color-ink);color:var(--color-ink)}
.tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:ds-blink 1.6s steps(2) infinite}
@keyframes ds-blink{50%{opacity:.2}}

/* 5.4 Label editorial (categoria) */
.label{font-size:var(--text-caption);letter-spacing:var(--tracking-caption);line-height:var(--leading-caption);color:var(--color-signal-green)}

/* 5.5 Nav */
.nav{display:flex;align-items:center;gap:var(--spacing-10);padding:var(--spacing-30) 0}
.logo{font-size:var(--text-caption);line-height:1.15;letter-spacing:var(--tracking-caption);margin-right:auto}
.logo span{display:block}

/* 5.6 Article card */
.card{display:flex;flex-direction:column;background:var(--color-paper);border-radius:0}
.band--newsprint .card{background:var(--color-paper)}
.card-body{padding:var(--card-padding);display:flex;flex-direction:column;gap:var(--spacing-10)}
.card-title{font-size:var(--text-card);line-height:var(--leading-card);font-weight:600;letter-spacing:-.01em}
.card-text{font-size:var(--text-body-sm);line-height:var(--leading-body-sm);letter-spacing:var(--tracking-body-sm);color:var(--color-pewter);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-index{font-size:var(--text-heading);line-height:1;letter-spacing:var(--tracking-heading);padding:var(--card-padding) var(--card-padding) 0}

/* 5.7 Photo slot (recorte cru) */
.photo{position:relative;background:var(--color-newsprint);overflow:hidden;border-radius:0}
.band--newsprint .photo{background:#262626}
.photo img{width:100%;height:100%;object-fit:cover}
.photo figcaption,.photo .ph{position:absolute;left:var(--spacing-12);bottom:var(--spacing-10);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-pewter)}

/* 5.8 Data list (linha fina) */
.dlist{border-top:1px solid var(--color-ink)}
.dlist > div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--spacing-20);padding:var(--spacing-15) 0;border-bottom:1px solid var(--color-pewter-line)}
.dlist dt{color:var(--color-pewter);font-size:var(--text-body-sm)}
.dlist dd{text-align:right}
.dlist dd.green{color:var(--color-signal-green)}

/* 5.9 Numbered list */
.nlist > li{display:grid;grid-template-columns:80px 1fr;gap:var(--spacing-20);padding:var(--spacing-25) 0;border-top:1px solid var(--color-pewter-line)}
.nlist > li:last-child{border-bottom:1px solid var(--color-pewter-line)}
.nlist .n{font-size:var(--text-heading-sm);line-height:1;letter-spacing:var(--tracking-heading-sm);color:var(--color-signal-green)}

/* 5.10 Pill toggle (segmentado) */
.toggle{display:inline-flex;gap:var(--spacing-8);flex-wrap:wrap}
.toggle button{padding:10px 18px;border-radius:var(--radius-full);border:1px solid var(--color-ink);font-size:var(--text-body-sm);transition:background var(--dur),color var(--dur)}
.toggle button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-paper)}

/* 5.11 Select */
.select{position:relative;display:inline-block;min-width:240px}
.select-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-12);padding:14px 20px;border-radius:var(--radius-full);border:1px solid var(--color-ink);font-size:var(--text-body-sm)}
.select-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px);background:var(--color-paper);border:1px solid var(--color-ink);display:none}
.select.is-open .select-list{display:block}
.select-list li{padding:12px 20px;cursor:pointer;font-size:var(--text-body-sm)}
.select-list li + li{border-top:1px solid var(--color-pewter-line)}
.select-list li:hover{background:var(--color-newsprint)}
.select-list li[aria-selected="true"]{color:var(--color-signal-green)}

/* 5.12 Countdown */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--color-ink)}
.countdown > div{padding:var(--spacing-15) var(--spacing-15) 0 0}
.countdown > div + div{padding-left:var(--spacing-15);border-left:1px solid var(--color-pewter-line)}
.countdown b{display:block;font-weight:400;font-size:clamp(40px,7vw,var(--text-display));line-height:var(--leading-display);letter-spacing:var(--tracking-display);font-variant-numeric:tabular-nums}
.countdown span{font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-pewter)}
.countdown--sm b{font-size:var(--text-heading)}

/* 5.13 Seat grid — 30 quadrados */
.seats{display:grid;grid-template-columns:repeat(15,1fr);gap:4px}
.seat{aspect-ratio:1;border:1px solid var(--color-pewter-line);transition:background var(--dur),border-color var(--dur)}
.seat.is-taken{background:var(--color-signal-green);border-color:var(--color-signal-green)}

/* 5.14 Marquee (faixa de texto) */
.marquee{overflow:hidden;border-block:1px solid var(--color-ink);padding:var(--spacing-15) 0;display:flex}
.marquee-track{display:flex;flex-shrink:0;gap:var(--spacing-40);padding-right:var(--spacing-40);white-space:nowrap;animation:ds-marquee 36s linear infinite;
  font-size:var(--text-heading-sm);line-height:1;letter-spacing:var(--tracking-heading-sm)}
.marquee-track span:nth-child(even){color:var(--color-signal-green)}
@keyframes ds-marquee{to{transform:translateX(-100%)}}

/* 5.15 Vertical word */
.vertical{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}

/* Reveal — só opacidade, sem firula */
[data-reveal]{opacity:0;transition:opacity 700ms var(--ease)}
[data-reveal].is-in{opacity:1}

@media (max-width:860px){
  .grid-3{grid-template-columns:1fr}
  .nlist > li{grid-template-columns:52px 1fr;gap:var(--spacing-12)}
  .seats{gap:3px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1}
}