/* ==========================================================================
   MÁSCARA — event sub-look.
   Scoped under .mascara so it cannot touch the Marea Mirage shell (nav, footer,
   THE LIST), which stays in the brand system: Oswald + Karla, sun/tide/abyss.

   Habibi's call: shell in the brand system, event body in the firelight
   sub-look. Do not reskin this to teal.

   LAYOUT DISCIPLINE — taken from the homepage, deliberately:
     · the hero is 100svh and nothing else is visible above the fold
     · photographs are FULL-BLEED, cover-cropped, at viewport-scaled heights,
       with no gutters and no border-radius (homepage .tile grid)
     · content sits in the site's own measure: max 1440 with 24/40/56px gutters,
       with text capped by ch rather than by a narrow box
   The event is a room full of masked people in firelight. The images are the
   argument; the layout's job is to get out of their way.

   Sub-look tokens (FACTS.md): ink #141110 · bone #F4EFE6 · gold #C8971C ·
   oxblood #7A1F2B · sand #E2D6C4.
   ========================================================================== */

.mascara {
  --ink: #141110;
  --bone: #F4EFE6;
  --gold: #C8971C;
  --ox: #7A1F2B;
  --sand: #E2D6C4;
  --mut: #9A8F80;
  --gutter: clamp(1.5rem, 4vw, 3.5rem);

  background: var(--ink);
  color: var(--bone);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  display: block;
  /* NB: no overflow-x:hidden here. Setting one axis to hidden makes the other
     compute to auto, which turns .mascara into its own scroll container and
     quietly breaks anchor scrolling and any sticky child. Verified there is no
     horizontal overflow to clip: scrollWidth === innerWidth at 390 and 1440. */
}
.mascara * { box-sizing: border-box; }
.mascara img { max-width: 100%; display: block; }
.mascara [hidden] { display: none !important; }

/* site measure, matching the shell's max-w-site + px-6/md:px-10/lg:px-14 */
.mascara .wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

.mascara .eyebrow { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.mascara h1 {
  font-size: clamp(3.25rem, 13vw, 9.5rem);
  letter-spacing: .1em; font-weight: 800; line-height: .92;
  margin: .18em 0 0; color: var(--bone);
}
.mascara h2 { font-size: clamp(1.75rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--bone); max-width: 18ch; }
.mascara h3 { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 800; margin: 0 0 1em; }
.mascara p { font-family: Georgia, serif; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); color: var(--sand); margin: 0 0 1em; max-width: 62ch; }
.mascara .rule { width: 90px; height: 3px; background: var(--gold); margin: 1.4rem 0; display: block; }

/* ---------- HERO — full screen, nothing below it before the scroll ---------- */
.mascara .hero {
  position: relative;
  min-height: 100vh;          /* fallback first */
  min-height: 100svh;         /* mobile browser chrome doesn't clip it */
  display: flex; align-items: flex-end;
  background: #000; overflow: hidden;
}
.mascara .hero picture, .mascara .hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* portrait source in a landscape frame: bias the crop upward so the mask
   survives the desktop cover-crop instead of being cut above the fold */
.mascara .hero img { opacity: .66; object-position: 50% 16%; }
@media (max-width: 700px) { .mascara .hero img { object-position: 58% 24%; } }
/* grounds the copy without flattening the photograph */
.mascara .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,17,16,.55) 0%, rgba(20,17,16,.12) 34%,
              rgba(20,17,16,.55) 74%, rgba(20,17,16,.88) 100%);
}
.mascara .hero .wrap {
  position: relative; z-index: 2; width: 100%;
  padding-top: clamp(7rem, 16vh, 11rem);
  padding-bottom: clamp(3.5rem, 9vh, 7rem);
  text-align: center;            /* CTA centred, and it matches the parent hero */
}
.mascara .hero .rule { margin-left: auto; margin-right: auto; }
.mascara .hero .meta {
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem); color: var(--bone);
  margin-top: 1.4rem; font-family: Georgia, serif; line-height: 1.75;
}
.mascara .hero .meta b {
  color: var(--gold); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: .1em; font-size: clamp(.8125rem, 1.05vw, .9375rem); font-weight: 700;
}
.mascara .hero .cta { margin-top: clamp(1.75rem, 3.5vh, 2.75rem); }

/* ---------- text sections ---------- */
.mascara section { padding: clamp(4.5rem, 11vh, 8rem) 0; border-top: 1px solid rgba(244, 239, 230, .12); }
.mascara section.flush { padding: 0; border-top: 0; }
.mascara .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
@media (max-width: 760px) { .mascara .grid { grid-template-columns: 1fr; } }
.mascara .big {
  font-size: clamp(2rem, 4.6vw, 3.75rem); font-weight: 800; line-height: 1.06;
  letter-spacing: -.015em; max-width: 20ch;
}
/* the promise, on its own, before the page starts showing you things */
.mascara .stmt { text-align: center; }
.mascara .stmt h3 { margin-bottom: 1.4em; }
.mascara .stmt .big { max-width: 24ch; margin-left: auto; margin-right: auto; }
/* the paragraph that carries the statement: centred to match the hero above it,
   but capped by ch so the line length still reads — a centred paragraph running
   the full 1440 would be worse than the orphaned column it replaces */
.mascara .stmt .say {
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem); line-height: 1.75;
  max-width: 54ch; margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0;
}
.mascara .lead { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--bone); margin-bottom: 1.2em; }

/* ---------- FULL-BLEED IMAGERY ----------
   The homepage's discipline: edge to edge, cover-cropped, height scaling with
   the viewport, no gutters, no radius. */
.mascara .band,
.mascara .split > .cell {
  position: relative; overflow: hidden; background: #0d0b0a;
}
.mascara .band img,
.mascara .split .cell img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* one full-bleed band, no copy — the fire moment, and a breath before the ticket */
.mascara .band { min-height: clamp(20rem, 40vw, 36rem); }

/* ---------- ONE IMAGE PER CLAIM ----------
   Each thing the page sells gets a photograph at real size, alternating sides.
   Not decoration in a strip: the image is the argument and the copy is the
   caption. Full-bleed to the viewport edge — no cards, no radius, no shadow. */
.mascara .split { display: grid; grid-template-columns: 44fr 56fr; gap: 0; align-items: stretch; }
.mascara .split.reverse { grid-template-columns: 56fr 44fr; }
.mascara .split > .copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3rem, 6vw, 6rem) var(--gutter);
}
.mascara .split > .copy > * { max-width: 40ch; }
.mascara .split > .copy p { font-size: clamp(1.125rem, 1.45vw, 1.4375rem); line-height: 1.75; }
.mascara .split > .copy .big { font-size: clamp(1.875rem, 3.4vw, 3rem); margin-bottom: .5em; }
.mascara .split > .cell { min-height: clamp(22rem, 38vw, 33rem); }
/* a portrait source gets a taller cell and a crop biased to the top, so a
   head can never be cut off by the cover-crop */
.mascara .split > .cell.portrait { min-height: clamp(28rem, 56vw, 50rem); }
/* The artist frame carries two things that matter: his head, and his hands on
   the decks at the bottom. The cell is sized and positioned so both survive the
   cover-crop — verified at 390 and 1440. */
.mascara .split > .cell.portrait img { object-position: 50% 25%; }

/* reversed rows read image-first on desktop; on mobile every row is
   image-then-copy, because leading with the photograph is the whole point */
@media (min-width: 901px) {
  .mascara .split.reverse > .copy { order: 2; }
  .mascara .split.reverse > .cell { order: 1; }
}
@media (max-width: 900px) {
  .mascara .split, .mascara .split.reverse { grid-template-columns: 1fr; }
  .mascara .split > .cell { order: -1; min-height: clamp(22rem, 78vw, 34rem); }
  .mascara .split > .cell.portrait { min-height: clamp(30rem, 118vw, 46rem); }
}

/* ---------- THE DAYLIGHT BREAK ----------
   The artist photograph is the one real photograph on the page and the only one
   shot in daylight. Grading it into the gold/ink ramp turns the sea to mustard
   and kills it, so it stays natural — and the page changes register around it
   rather than leaving one frame looking like it missed the memo. Dark, then a
   bone plate, then dark again. It reads as a deliberate spread, and it puts the
   one honest image on the page in the one section that looks different. */
.mascara .split.daylight > .copy { background: var(--bone); color: var(--ink); }
.mascara .split.daylight > .copy h3 { color: var(--ox); }
.mascara .split.daylight > .copy p { color: #3A322C; }

/* ---------- tickets ---------- */
.mascara .tiers { display: grid; gap: 14px; margin: 1.8rem 0 .5rem; max-width: 46rem; }
.mascara .tier {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap;
  border: 1px solid rgba(244, 239, 230, .18); padding: clamp(1.25rem, 2.4vw, 1.75rem); background: rgba(244, 239, 230, .03);
}
.mascara .tier .t { font-size: clamp(1.0625rem, 1.5vw, 1.375rem); font-weight: 800; letter-spacing: .02em; }
.mascara .tier .s { font-size: .8125rem; color: var(--mut); margin-top: 3px; }
.mascara .tier .p { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; color: var(--gold); white-space: nowrap; }
.mascara .fineprint {
  font-family: Georgia, serif; font-size: .9375rem; color: var(--mut);
  margin: 0; max-width: 34ch;
}
.mascara .sold { opacity: .42; }
.mascara .sold .p { color: var(--mut); }

/* the event body keeps its own pill — the shell's .btn is square, Oswald, teal */
.mascara .mbtn {
  display: inline-block; background: var(--bone); color: var(--ink); text-decoration: none;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  font-size: clamp(.75rem, .95vw, .8125rem);
  padding: 1.05em 2.2em; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.mascara .mbtn:hover { background: var(--gold); color: var(--ink); }
.mascara .mbtn.ghost { background: transparent; color: var(--bone); border-color: rgba(244, 239, 230, .4); }
.mascara .mbtn.ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.mascara .mbtn.pending { background: var(--mut); color: var(--ink); opacity: .55; cursor: default; }
.mascara .mbtn.pending:hover { background: var(--mut); color: var(--ink); }

.mascara .note { border-left: 3px solid var(--ox); padding: .25rem 0 .25rem 1.1rem; margin: 1.6rem 0 0; max-width: 46rem; }
.mascara .note p { margin: 0; color: var(--bone); }
.mascara ul { font-family: Georgia, serif; color: var(--sand); font-size: clamp(1.0625rem, 1.25vw, 1.25rem); padding-left: 1.2em; margin: 0 0 1em; max-width: 62ch; }
.mascara li { margin-bottom: .5em; }

/* ---------- THE CONVERSION ----------
   The page has exactly one job. This section is the destination every other
   section points at, so it gets its own ground — a low firelight wash off the
   flat ink — and it is the one centred block on an otherwise left-aligned page.
   Scarcity here is real and stated in the locked copy: 105 lugares, and when
   they are gone they are gone. No countdown, no invented remaining-count. */
.mascara #entradas {
  background:
    radial-gradient(120% 78% at 50% 0%, rgba(200, 151, 28, .14) 0%, rgba(200, 151, 28, 0) 62%),
    #17130F;
  border-top: 1px solid rgba(200, 151, 28, .38);
  text-align: center;
}
.mascara #entradas h3 { margin-bottom: 1.2em; }
.mascara #entradas h2 { max-width: none; font-size: clamp(2.25rem, 5.2vw, 4rem); margin-bottom: .4em; }
.mascara #entradas p { max-width: 52ch; margin-left: auto; margin-right: auto; }
.mascara #entradas .tiers { max-width: 44rem; margin-left: auto; margin-right: auto; }
.mascara #entradas .tier {
  flex-direction: column; gap: 1rem; text-align: center;
  padding: clamp(1.75rem, 3.4vw, 3rem);
  border-color: rgba(200, 151, 28, .38); background: rgba(20, 17, 16, .55);
}
.mascara #entradas .tier .p { font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1; }
.mascara #entradas .tier .s { font-size: .875rem; }
.mascara #entradas .mbtn { font-size: clamp(.8125rem, 1.05vw, .9375rem); padding: 1.15em 3.2em; }
/* the tier is a column here, so the chip's flex-basis:100% would resolve
   against the HEIGHT and balloon. Pin it to the row axis instead. */
.mascara #entradas .tier .todo { flex: 0 0 auto; width: 100%; }
.mascara #entradas .fineprint { margin-left: auto; margin-right: auto; text-align: center; }
.mascara #entradas .note {
  border-left: 0; padding: 0; margin: 1.8rem auto 0; max-width: 46ch;
}
.mascara #entradas .note p { color: var(--bone); margin: 0 auto; }

/* ---------- faq ---------- */
.mascara .faq { border-top: 1px solid rgba(244, 239, 230, .12); padding: clamp(1.1rem, 2vw, 1.6rem) 0; max-width: 70ch; }
.mascara .faq b { display: block; font-size: 1rem; margin-bottom: .35em; color: var(--bone); }
.mascara .faq span { font-family: Georgia, serif; color: var(--sand); font-size: 1rem; }

/* ---------- contact / TODO chips ---------- */
.mascara .contact { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: .6rem; }
.mascara .mbtn.wa { display: inline-flex; align-items: center; gap: 9px; }
.mascara .mbtn.wa svg { width: 16px; height: 16px; flex: none; }
.mascara .todo {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #E0A0AA; background: rgba(122, 31, 43, .22); border: 1px dashed rgba(122, 31, 43, .9);
  padding: 7px 11px; display: inline-block;
}
.mascara .tier .todo { flex: 1 0 100%; text-align: center; }

/* ---------- thank-you page ---------- */
.mascara .thanks { padding: clamp(9rem, 20vh, 13rem) 0 clamp(4.5rem, 11vh, 8rem); }
.mascara .thanks h1 { font-size: clamp(2.5rem, 7vw, 5rem); letter-spacing: -.01em; }
.mascara .recap { border: 1px solid rgba(244, 239, 230, .18); padding: clamp(1.25rem, 2.4vw, 1.75rem); background: rgba(244, 239, 230, .03); margin: 1.6rem 0; max-width: 40rem; }
.mascara .recap .t { font-size: 1.1875rem; font-weight: 800; letter-spacing: .02em; margin-bottom: .4em; }
.mascara .recap .l { font-family: Georgia, serif; color: var(--sand); font-size: 1rem; line-height: 1.9; }
.mascara .recap .l b { color: var(--gold); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .1em; font-size: .875rem; }

/* ---------- sticky mobile tickets bar ----------
   Not scoped to .mascara because it is fixed to the viewport. */
.mascara-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 17, 16, .95); border-top: 1px solid rgba(244, 239, 230, .16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mascara-sticky .mbtn {
  display: block; width: 100%; text-align: center;
  background: #F4EFE6; color: #141110; text-decoration: none;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 13px;
  padding: 15px 28px; border-radius: 999px;
}
@media (max-width: 860px) {
  .mascara-sticky { display: block; }
  body.has-mascara-sticky footer { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .mascara .mbtn { transition: none; }
}