/* ============================================================
   ÚLTIMOS CLIENTES — design tokens.
   Palette is derived from the band's OWN gig posters and stage
   photography (magenta/acid/cyan under black), not from the bar.
   Builders: use ONLY these tokens. Never hardcode a hex.
   ============================================================ */

:root {
  /* --- ink & paper --- */
  --ink:        #0A0A0B;   /* near-black, the ground */
  --ink-2:      #141416;   /* raised black */
  --ink-3:      #232327;   /* hairline / border black */
  --paper:      #F4EFE4;   /* warm off-white, from the Challenge Ibérique poster */
  --paper-2:    #E4DCCB;   /* dimmed paper */

  /* --- THE accent. One. Straight off their "Rock·Reggae·Ska" poster. --- */
  --hot:        #E8123F;   /* fills, rules, brackets, LARGE display type */
  /* --hot on --ink is 4.32:1 — fine for big type and for graphics, below AA
     for anything small. Small red text uses this instead: 6.64:1. */
  --hot-txt:    #FF5C77;

  /* --- the reserved colour. See HOUSE RULE 8. --- */
  --acid:       #F5E63B;   /* Verbena en Ballena yellow */

  /* --- photo-derived only: these exist so text can sit ON their own
         posters and stage neon. NEVER use them as a UI colour. --- */
  --cyan:       #17B4CE;
  --neon-mag:   #FF2E88;
  --neon-grn:   #52E08A;
  --neon-blu:   #2B6BF0;

  /* --- semantic --- */
  --bg:         var(--ink);
  --fg:         var(--paper);
  --fg-dim:     #9C978C;
  --rule:       rgba(244,239,228,.22);
  --rule-ink:   rgba(10,10,11,.24);

  /* --- type --- */
  --f-display:  'Anton', 'Arial Narrow', sans-serif;
  --f-ui:       'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-text:     'Archivo', system-ui, -apple-system, sans-serif;

  /* fluid scale, 390px → 1440px */
  --t-mega:  clamp(3.75rem, 15.5vw, 11rem);   /* the wordmark */
  --t-h1:    clamp(2.5rem,  8.5vw, 5.5rem);
  --t-h2:    clamp(1.9rem,  6vw,   3.5rem);
  --t-h3:    clamp(1.15rem, 3.4vw, 1.6rem);
  --t-body:  clamp(1rem,    1.05rem + .25vw, 1.2rem);
  --t-ui:    clamp(.82rem,  .8rem + .2vw, .95rem);
  --t-micro: .72rem;

  --lh-tight: .88;
  --lh-snug:  1.12;
  --lh-body:  1.55;
  --tr-mega: -.02em;
  --tr-ui:   .14em;   /* letterspacing for the small all-caps UI type */

  /* --- rhythm --- */
  --gut:     clamp(1.15rem, 5vw, 3.25rem);   /* page gutter */
  --sec-y:   clamp(2.75rem, 8vw, 6rem);      /* section vertical padding — resserre le 2026-09-12 :
                                                 deux sections bout a bout faisaient 225 px de vide */
  --stack:   clamp(1rem, 3vw, 1.75rem);
  --maxw:    78rem;
  --measure: 34rem;

  /* --- surfaces: hard edges only. No radius, no shadow. --- */
  --radius: 0;
  --hair: 1px;
  --border: 2px;

  --ease: cubic-bezier(.2,.7,.3,1);
  --dur: .35s;
}

/* ============================================================
   HOUSE RULES (non-negotiable, every section obeys)
   1. Sharp corners. --radius is 0 and stays 0.
   2. No drop shadows, no glassmorphism, no gradient buttons.
   3. Every section is full-bleed edge-to-edge. Content is
      constrained by --maxw inside, never the section itself.
   4. All UI/nav/button/label type is ALL CAPS, --f-ui,
      letterspaced --tr-ui, weight 700+.
   5. Buttons = hairline outlined rectangles OR solid flat fills.
      Never a pill. Never a shadow.
   6. Sections alternate ground: ink → paper → colour → photo.
      Two adjacent sections never share a ground.
   7. Images are full-bleed or hard-cropped to a grid. No
      floating rounded thumbnails.
   8. COLOUR DISCIPLINE. --hot is the one structural accent.
      --acid is RESERVED: it may appear in exactly two places on
      the whole page — the primary booking CTA, and the marker on
      the next upcoming date. Nowhere else, ever. Everything else
      is ink, paper, or photograph. A page with three loud colours
      shouting at once reads as a flyer, not as a band worth money.
   9. Every section EXCEPT the hero carries a numbered label
      (.uc-label). The page reads as a numbered dossier. The hero is
      not an item in the dossier, it is the cover — a "01" above the
      band's own name is decoration pretending to be structure.
  10. Type sizes come from the scale. Never invent a font-size.
  11. Small red text uses --hot-txt, never --hot. --hot on ink is
      4.32:1: fine for fills, rules and display type at 24px+ (or
      19px+ bold), below AA for anything smaller. Role labels, credits,
      captions and eyebrows in red all take --hot-txt.
  12. The single most important string in a block is never its
      smallest type. If a booking email, a venue name or a date is
      the thing a programmer came for, it does not get set at 11px
      grey underneath something decorative.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--f-text); font-size: var(--t-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; line-height: var(--lh-snug); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* shared primitives ---------------------------------------- */
.uc-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.uc-sec  { padding-block: var(--sec-y); position: relative; }

.uc-eyebrow {
  font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-ui);
}
.uc-display { font-family: var(--f-display); text-transform: uppercase; letter-spacing: var(--tr-mega); line-height: var(--lh-tight); }

.uc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-ui);
  padding: .95em 1.6em; border: var(--border) solid currentColor;
  text-decoration: none; background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.uc-btn--solid { background: var(--hot); border-color: var(--hot); color: var(--paper); }
.uc-btn--solid:hover, .uc-btn--solid:focus-visible { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.uc-btn:hover, .uc-btn:focus-visible { background: currentColor; }
.uc-btn:hover > *, .uc-btn:focus-visible > * { mix-blend-mode: difference; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--acid); outline-offset: 3px;
}

/* screen-print grain, laid over photography ---------------- */
.uc-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* page-wide film grain. Fixed, so it sits still while the page moves
   underneath — the thing that makes a flat black page feel printed
   rather than empty. One element, zero requests. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media print { body::after { display: none; } }

/* --- section label: "01 — LO QUE SE LLEVAN" with a rule running off
       to the edge. Every section opens with one. (HOUSE RULE 9) --- */
.uc-label {
  display: flex; align-items: center; gap: .9em;
  font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-ui);
  color: var(--fg-dim); margin-bottom: var(--stack);
}
.uc-label__n { color: var(--hot-txt); font-variant-numeric: tabular-nums; }
.uc-label::after { content: ""; flex: 1; height: var(--hair); background: currentColor; opacity: .45; }

/* --- crosshair rule: their reticle motif, as a divider --- */
.uc-tick { display: flex; align-items: center; justify-content: center; gap: .75rem; color: var(--hot); }
.uc-tick::before, .uc-tick::after { content: ""; height: var(--hair); flex: 1; background: var(--rule); }
.uc-tick > i {
  width: .62rem; height: .62rem; flex: none; border: var(--hair) solid currentColor;
  border-radius: 50%; position: relative;
}
.uc-tick > i::before, .uc-tick > i::after {
  content: ""; position: absolute; background: currentColor;
}
.uc-tick > i::before { left: -.28rem; right: -.28rem; top: 50%; height: var(--hair); }
.uc-tick > i::after  { top: -.28rem; bottom: -.28rem; left: 50%; width: var(--hair); }

/* --- corner brackets: hard registration marks around media --- */
.uc-brk { position: relative; }
.uc-brk::before, .uc-brk::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 3;
  border: var(--border) solid var(--hot);
}
.uc-brk::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.uc-brk::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* --- reveal-on-scroll, opt-in via [data-reveal]. Scoped to .js so the
       page is fully visible when JavaScript never runs. --- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

/* i18n: all three languages ship inline; CSS hides the inactive
   ones off the <html lang> attribute, so the page is correct with
   JavaScript disabled and never flashes the wrong language. */
html[lang="es"] [data-lang]:not([data-lang="es"]),
html[lang="fr"] [data-lang]:not([data-lang="fr"]),
html[lang="en"] [data-lang]:not([data-lang="en"]) { display: none !important; }

.uc-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* skip link — hidden until it is focused, then a hard flat block in the
   top-left. Without this it paints grey text straight over the wordmark. */
.uc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-ui); text-decoration: none;
}
.uc-skip:focus-visible, .uc-skip:focus {
  left: 0; padding: .8rem 1.2rem; background: var(--paper); color: var(--ink);
}