/* ==========================================================================
   CNTRL.MX — styles
   No raw colors in this file: every color is a token from tokens.css.
   ========================================================================== */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { overflow-x: clip; }

body.is-locked { overflow: hidden; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--piedra); color: var(--carbon); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-light);
  color: var(--text-on-light);
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Logo (alpha mask → token color) ---------- */
.logo {
  display: block;
  aspect-ratio: 808 / 464;
  background-color: var(--piedra);
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
          mask: var(--logo-mask) center / contain no-repeat;
}
.logo--nav    { width: 80px; }
.logo--hero   { width: min(100%, 860px); background-color: var(--fuego); will-change: opacity; }

/* ---------- Labels: eyebrows, badges, tags ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--piedra);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--cta-bg);
  color: var(--cta-text);
}
.btn--primary:hover { background: var(--cta-bg-hover); }

.btn--lg { min-height: 56px; padding-inline: var(--space-5); font-size: 1.0625rem; }


/* ---------- Nav (two rows on desktop, one on mobile) ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding-top: env(safe-area-inset-top);
  background: var(--tinta-15);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}

.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding-inline: var(--gutter);
}
.nav__row--sub,
.nav__links { display: none; }

.nav__brand {
  display: inline-flex;
  padding: var(--space-1) 0;
  opacity: var(--brand-p, 1); /* driven by scroll in main.js */
}
/* At the very top the hero logo is the brand — hide the nav copy (and its tab stop) */
.nav__brand.is-hidden { visibility: hidden; }
/* Menu open: always show the nav logo */
body.is-locked .nav__brand { opacity: 1; visibility: visible; }

.nav__group { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.nav__group a {
  padding-block: var(--space-1);
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  /* underline that draws in from the left */
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-med) var(--ease-out);
}
.nav__group a:hover,
.nav__group a:focus-visible { background-size: 100% 1px; }

.nav__mobile { display: flex; align-items: center; gap: var(--space-2); }
.nav__row .nav__email { display: none; } /* phones: email lives in the full-screen menu */

/* Email that copies itself */
.copy-email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0;
  background: var(--clear);
  border: 0;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.copy-email:hover,
.copy-email.is-copied { color: var(--piedra); }
.copy-email--lg { font-size: 1.125rem; }

/* WKSC: each letter in its own circle (nav row 2) */
.wksc { display: inline-flex; gap: 2px; }
.wksc > span {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--piedra-80);
  border-radius: 50%;
  font-size: 0.4375rem;
  font-weight: 700;
  line-height: 1;
}

/* Language: globe + segmented ES / EN pill */
.lang { display: inline-flex; align-items: center; gap: var(--space-2); }
.globe {
  display: block;
  width: 24px;
  aspect-ratio: 448 / 280;
  background-color: var(--piedra);
  -webkit-mask: var(--globe-mask) center / contain no-repeat;
          mask: var(--globe-mask) center / contain no-repeat;
}
.lang__pill {
  display: inline-flex;
  padding: 3px;
  background: var(--piedra-08);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.lang__opt {
  min-width: 40px;
  min-height: 32px;
  padding: 0 var(--space-2);
  background: var(--clear);
  border: 0;
  border-radius: 999px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang__opt:hover { color: var(--piedra); }
.lang__opt[aria-pressed="true"] { background: var(--piedra); color: var(--carbon); }

.nav__menu {
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--space-2);
  background: var(--clear);
  border: 0;
  color: var(--piedra);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  cursor: pointer;
}

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

/* ---------- Full-screen menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--space-8) + env(safe-area-inset-top)) var(--gutter) max(var(--space-5), env(safe-area-inset-bottom));
  background: var(--tinta);
  opacity: 0;
  transform: translateY(-2%);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; transform: none; }
.menu__foot { display: grid; gap: var(--space-3); justify-items: start; }

.menu__list a {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 10vw, 6rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.menu__list a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.menu__num {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding: calc(var(--space-8) + env(safe-area-inset-top)) var(--gutter) var(--space-6);
  overflow: hidden;
}

/* Background video + Carbon scrim so Piedra badges stay legible */
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--carbon); }
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--carbon-70), var(--carbon-0) 22%),
    radial-gradient(ellipse at 50% 85%, var(--carbon-70), var(--carbon-0) 70%),
    linear-gradient(var(--carbon-0) 55%, var(--carbon)),
    var(--carbon-45);
}

.hero__inner {
  will-change: transform; /* scroll parallax in main.js */
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
}

.hero__title { width: 100%; }
.hero__title .logo { margin-inline: auto; }

/* Badge strip (soundwave / address / 2026 mark) */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  color: var(--piedra);
}
.badge {
  display: flex;
  flex-direction: column;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.badge span { font-weight: 500; }
.badge--wave { flex-direction: row; align-items: center; gap: var(--space-2); }
.badge__vert { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700 !important; }
.soundwave { width: 44px; height: 30px; }
.badge--mark { justify-content: center; }
.mark-2026 {
  display: block;
  width: 120px;
  aspect-ratio: 360 / 75;
  background-color: var(--piedra);
  -webkit-mask: var(--mark-2026-mask) center / contain no-repeat;
          mask: var(--mark-2026-mask) center / contain no-repeat;
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(var(--space-7), 12vw, 10rem); }

/* ---------- About (editorial: labels · giant word · info row · statement · table) ---------- */
.about { border-top: 1px solid var(--border); }
/* Full-bleed: align with the nav's left edge instead of the centered container */
.about > .container { max-width: none; }

.about__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.about__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}
.about__label--muted { color: var(--text-muted); }

/* Giant word fills the row; dim mark sits at the far right like the reference's "7" */
.about__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  line-height: 0.8;
}
.about__word {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.06em;
  line-height: 0.8;
}
.about__hero { margin: 0; }
.about__word { font-size: clamp(3rem, 19vw, 30rem); white-space: nowrap; }
.about__sub {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.about__sub span { color: var(--text-muted); padding-inline: 0.25em; }

.about__info {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
  font-size: 0.9375rem;
}
.about__col { display: grid; align-content: start; gap: var(--space-2); }
.about__col p:not(.about__label) { max-width: 38ch; }
.about__list { line-height: 1.5; }

/* Split-flap headline: each letter flips through characters, then locks in (main.js) */
.about__word[data-flap] { display: inline-flex; }
.flap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-align: center;
}
.flap.is-flip { animation: flap-flip 70ms ease-out; }
.flap.is-settled { animation: flap-blink 360ms steps(2, jump-none) 1; }
/* Split-flap seam, only while the board is moving */
.is-flapping .flap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(2px, 0.012em);
  background: var(--carbon);
}
@keyframes flap-flip { from { transform: perspective(600px) rotateX(-70deg); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes flap-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* "Management" / "Tour Management": buttons that open the Roster pop-up */
.roster-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0;
  background: var(--clear);
  border: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--piedra-30);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.roster-trigger:hover,
.roster-trigger[aria-expanded="true"] { text-decoration-color: var(--piedra); }
.roster-trigger__icon { width: 0.85em; height: 0.85em; color: var(--text-muted); }

/* Roster pop-up: floats at the right edge, vertically centered */
.roster {
  position: fixed;
  top: 50%;
  right: clamp(var(--gutter), 8vw, 10rem); /* in from the edge, not flush against it */
  z-index: var(--z-popover);
  width: min(460px, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-5);
  background: var(--tinta);
  border: 1px solid var(--border-strong);
  box-shadow: 0 24px 60px var(--carbon-70);
  opacity: 0;
  visibility: hidden;
  transform: translate(16px, -50%);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              visibility 0s linear var(--dur-med);
}
.roster.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
/* Phones & tablets: bottom sheet, so the card never covers the item that opened it */
@media (max-width: 1099px) {
  .roster {
    top: auto;
    bottom: max(var(--gutter), env(safe-area-inset-bottom));
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-width: 520px;
    margin-inline: auto;
    transform: translateY(16px);
    padding: var(--space-4);
  }
  .roster.is-open { transform: none; }
  .roster__artist { grid-template-columns: 88px 1fr; gap: var(--space-3); padding-block: var(--space-3); }
  .roster__name { font-size: 1.25rem; }
}
.roster__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-strong);
}
.roster__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.roster__context { font-size: 0.8125rem; color: var(--text-muted); }
.roster__artist {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.roster__artist:last-child { border-bottom: 0; padding-bottom: 0; }
/* Artist photo (square crop) */
.roster__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--carbon);
  border: 1px dashed var(--piedra-30);
  color: var(--text-muted);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  overflow: hidden;
}
.roster__photo img { width: 100%; height: 100%; object-fit: cover; }
.roster__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.roster__links { margin-top: var(--space-2); font-size: 0.9375rem; color: var(--text-muted); }
.roster__links a { color: var(--piedra); text-underline-offset: 3px; }

/* Partners box (left) and statement (right) share one row */
.about__row {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  margin-top: clamp(var(--space-7), 12vw, 10rem);
}
.about__statement {
  display: grid;
  justify-items: end;
  text-align: right;
}
.about__statement p {
  max-width: 34ch;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  text-wrap: balance;
}

/* Partners strip: scrolling wordmarks (left) + static statement (right) */
.partners {
  display: grid;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto; /* scrolling logos left, static label right */
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}
.partners__marquee {
  overflow: hidden;
  /* fade the logos out at both ends */
  -webkit-mask-image: linear-gradient(90deg, var(--clear), var(--carbon) 18%, var(--carbon) 82%, var(--clear));
          mask-image: linear-gradient(90deg, var(--clear), var(--carbon) 18%, var(--carbon) 82%, var(--clear));
}
.partners__track {
  display: flex;
  width: max-content;
  animation: partners-scroll 30s linear infinite;
}
.partners:hover .partners__track { animation-play-state: paused; }
.partners__set {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-right: var(--space-5);
}
@keyframes partners-scroll { to { transform: translateX(-50%); } }

/* Partner marks */
.partner {
  flex: none;
  color: var(--text-muted);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}
/* Partner logos: alpha masks tinted with the muted Piedra text color */
.partner-logo {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--mask) center / contain no-repeat;
          mask: var(--mask) center / contain no-repeat;
}
.partner-logo--bear     { --mask: var(--partner-bear-mask);     height: 1.9em; aspect-ratio: 132 / 142; }
.partner-logo--copa     { --mask: var(--partner-copa-mask);     height: 1.35em; aspect-ratio: 673 / 129; }
.partner-logo--bitdepth { --mask: var(--partner-bitdepth-mask); height: 1.7em; aspect-ratio: 622 / 91; }
.partner--wksc { display: inline-flex; gap: 4px; }
.partner--wksc span {
  display: inline-grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 0.7em;
}

.partners__text {
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

@media (min-width: 900px) {
  /* partners fill everything up to the statement — no gap in the middle */
  .about__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); }
}
/* Stacked (narrow screens): statement first, then partners */
@media (max-width: 899px) {
  .about__statement { order: -1; }
}

/* ---------- Contact + footer ("finale") ---------- */
.finale {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-6);
  min-height: 100svh;
  padding: var(--space-8) var(--gutter) max(var(--space-4), env(safe-area-inset-bottom));
  overflow: hidden;
  background: var(--carbon);
}

.finale__brand { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.logo--finale { width: clamp(140px, 15vw, 200px); }
.finale__tagline { font-size: clamp(1rem, 1.6vw, 1.25rem); }

.finale__side { display: grid; align-content: end; gap: var(--space-2); order: 2; }
.finale__side--right { order: 3; margin-top: calc(-1 * var(--space-5)); }
.finale__side--right .finale__legal { margin-top: 0; }
.finale__legal-link {
  padding: 0;
  background: var(--clear);
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--piedra-30);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.finale__legal-link:hover { color: var(--piedra); text-decoration-color: var(--piedra); }

/* ---------- Cookie consent banner ---------- */
.consent {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  z-index: var(--z-consent);
  display: grid;
  gap: var(--space-3);
  max-width: 440px;
  padding: var(--space-4);
  background: var(--tinta);
  border: 1px solid var(--border-strong);
  box-shadow: 0 24px 60px var(--carbon-70);
  font-size: 0.875rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.consent.is-open { opacity: 1; transform: none; }
.consent__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.consent__text { color: var(--text-muted); line-height: 1.5; }
.consent__inline {
  padding: 0;
  background: var(--clear);
  border: 0;
  color: var(--piedra);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent__prefs[hidden] { display: none; }
.consent__prefs { display: grid; gap: var(--space-1); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.consent__opt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding-block: var(--space-2);
  cursor: pointer;
}
.consent__opt strong { display: block; font-weight: 700; }
.consent__opt small { display: block; color: var(--text-muted); font-size: 0.8125rem; line-height: 1.4; }
/* Switches */
.consent__opt input {
  position: relative;
  width: 38px;
  height: 22px;
  margin: 2px 0 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--carbon);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.consent__opt input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--piedra-80);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.consent__opt input:checked { background: var(--piedra); }
.consent__opt input:checked::after { transform: translateX(16px); background: var(--carbon); }
.consent__opt input:disabled { opacity: 0.55; cursor: not-allowed; }
.consent__opt input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Accept and Reject look identical on purpose: neither choice is pushed */
.consent__btn {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 0 var(--space-3);
  background: var(--piedra);
  border: 1px solid var(--piedra);
  border-radius: 999px;
  color: var(--carbon);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.consent__btn:hover { background: var(--clear); color: var(--piedra); }
.consent__btn--ghost { flex-basis: 100%; background: var(--clear); color: var(--piedra); border-color: var(--border-strong); }
.consent__btn--ghost:hover { border-color: var(--piedra); }
.consent__btn[hidden] { display: none; }

/* ---------- Terms & Privacy dialog ---------- */
.privacy {
  width: min(640px, calc(100vw - 2 * var(--gutter)));
  max-height: min(80vh, 760px);
  padding: 0;
  background: var(--tinta);
  color: var(--piedra);
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 80px var(--carbon-70);
  overflow: hidden;
}
.privacy[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  animation: privacy-in var(--dur-med) var(--ease-out);
}
.privacy::backdrop {
  background: var(--carbon-70);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
@keyframes privacy-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

.privacy__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-strong);
}
.privacy__title {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  text-transform: uppercase;
}
.privacy__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  background: var(--clear);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--piedra);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.privacy__close:hover { background: var(--piedra); color: var(--carbon); }
.privacy__close svg { width: 18px; height: 18px; }

.privacy__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--space-5) var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.privacy__body h3 {
  margin: var(--space-4) 0 var(--space-1);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.privacy__body h3:first-child { margin-top: 0; }
.privacy__body p, .privacy__body li { color: var(--text-muted); }
.privacy__body ul { margin-top: var(--space-1); padding-left: var(--space-4); list-style: disc; }
.privacy__body a { color: var(--piedra); text-underline-offset: 3px; }
.privacy__updated { margin-top: var(--space-4); font-size: 0.8125rem; }
.finale__card { order: 1; }
.finale__lines {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}
.finale__lines a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size var(--dur-med) var(--ease-out);
}
.finale__lines a:hover,
.finale__lines a:focus-visible { background-size: 100% 2px; }
.finale__ugc {
  max-width: 34ch;
  margin-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--text-muted);
  text-underline-offset: 3px;
}
.finale__ugc:hover { color: var(--piedra); }
.finale__legal { margin-top: var(--space-5); font-size: 0.875rem; color: var(--text-muted); }

/* Form card — Piedra surface, Carbon text */
.finale__card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--bg-light);
  color: var(--text-on-light);
  text-align: center;
}
.finale__card-title {
  margin-bottom: var(--space-3);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.form { display: grid; gap: var(--space-2); text-align: left; }
/* Spam trap: off-screen, never shown to people */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__summary {
  padding: var(--space-3);
  border: 1px solid var(--carbon);
  border-left-width: 6px;
  font-weight: 500;
}
.form__summary ul { margin-top: var(--space-2); padding-left: var(--space-4); list-style: square; }
.form__summary a { text-underline-offset: 3px; }

/* Dark Tinta fields with the label set inside, top-left */
.field { position: relative; display: grid; gap: var(--space-1); }
.field label {
  position: absolute;
  top: 9px;
  left: var(--space-3);
  z-index: 1;
  color: var(--piedra-80);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  pointer-events: none;
}
.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 24px var(--space-3) 6px;
  background: var(--tinta);
  border: 2px solid var(--tinta);
  border-radius: 0;
  color: var(--piedra);
  font: inherit;
  font-size: 1rem; /* ≥16px: prevents iOS zoom on focus */
  transition: border-color var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
          appearance: none;
}
.field textarea { resize: vertical; min-height: 5rem; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--carbon); }

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  font-weight: 700;
}
.field__error[hidden] { display: none; }
.field__error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  background: var(--carbon);
  color: var(--piedra);
  font-size: 0.75rem;
}

.form__actions { display: grid; justify-items: center; gap: var(--space-2); padding-top: var(--space-2); }
.form__note { font-size: 0.8125rem; text-align: center; }

/* Submit button: idle → sending (dots) → done ("We'll get back to you") */
.form__submit { display: inline-grid; place-items: center; overflow: hidden; }
.form__face {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}
.form__face--sending,
.form__face--done { opacity: 0; transform: translateY(110%); }
.form__submit[data-state="sending"] .form__face--idle,
.form__submit[data-state="done"] .form__face--idle,
.form__submit[data-state="done"] .form__face--sending { opacity: 0; transform: translateY(-110%); }
.form__submit[data-state="sending"] .form__face--sending,
.form__submit[data-state="done"] .form__face--done { opacity: 1; transform: none; }
.form__submit[data-state="sending"] { cursor: progress; }
.form__submit[data-state="done"] { cursor: default; animation: submit-pop 420ms var(--ease-out); }
.form__submit:disabled:hover { background: var(--cta-bg); }
@keyframes submit-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

.form__dots { display: inline-flex; gap: 6px; }
.form__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: dot-bounce 900ms ease-in-out infinite;
}
.form__dots i:nth-child(2) { animation-delay: 120ms; }
.form__dots i:nth-child(3) { animation-delay: 240ms; }
@keyframes dot-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }
.icon-arrow { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Motion: smooth scroll (Lenis), page-load intro, scroll reveals ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Scroll reveals: rise + fade; children of [data-reveal-stagger] get increasing delays (main.js) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Page-load intro: nav drops in, hero logo rises, badges follow one by one */
/* Plays as the loader lifts (html.is-ready); the hero logo itself is handed over by the loader */
.is-ready .nav { animation: intro-nav 800ms var(--ease-out) 250ms both; }
.is-ready .hero__badges > li { animation: intro-rise 900ms var(--ease-out) both; }
.is-ready .hero__badges > li:nth-child(1) { animation-delay: 350ms; }
.is-ready .hero__badges > li:nth-child(2) { animation-delay: 450ms; }
.is-ready .hero__badges > li:nth-child(3) { animation-delay: 550ms; }
.is-ready .hero__video { animation: intro-video 1600ms var(--ease-out) both; }

/* ---------- Loader ---------- */
.loader { display: none; }
.is-loading body { overflow: hidden; }
.is-loading .loader,
.loader.is-leaving {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: block;
  background: var(--carbon);
}
.loader.is-leaving {
  pointer-events: none;
  background: var(--carbon-0);
  transition: background-color 900ms var(--ease-out);
}
/* Same mask + box as the hero logo (position set by main.js), so the hand-off is seamless */
.loader__logo {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-color: var(--piedra-08);
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
          mask: var(--logo-mask) center / contain no-repeat;
}
/* Fuego rises from the bottom; the grunge filter roughens and "boils" its top edge */
.loader__fill {
  position: absolute;
  left: -12%;
  right: -12%;
  top: -18%;
  bottom: -18%;
  background: var(--fuego);
  filter: url(#grunge);
  /* fill box is 136% of the logo tall: top edge travels from 105% (empty) to −10% (full) */
  transform: translateY(calc((8 + (1 - var(--p, 0)) * 115) / 136 * 100%));
  will-change: transform;
}
.loader__count {
  position: absolute;
  left: var(--gutter);
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: opacity 400ms var(--ease-out);
}
.loader.is-leaving .loader__count { opacity: 0; }
.loader__defs { position: absolute; width: 0; height: 0; }
@keyframes intro-nav   { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes intro-rise  { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes intro-video { from { opacity: 0; } to { opacity: 1; } }

/* Statement lights up word by word as it scrolls through the viewport (main.js) */
[data-words] .word { opacity: 0.18; transition: opacity 400ms var(--ease-out); }
[data-words] .word.is-lit { opacity: 1; }

@media (min-width: 768px) {
  .about__info { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-4); }
}

/* ---------- Contact/footer: tablet (card on top, sides below) → wide (3 columns like the reference) ---------- */
@media (min-width: 768px) {
  .finale { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
  .finale__brand, .finale__card { grid-column: 1 / -1; }
  .finale__card { justify-self: center; width: 100%; max-width: 400px; }
  .finale__side--right { text-align: right; justify-items: end; margin-top: 0; }
}

@media (min-width: 1280px) {
  .finale {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    row-gap: var(--space-4);
    padding-bottom: 0;
  }
  .finale__card { grid-column: auto; align-self: end; max-width: none; }
  .finale__side, .finale__side--right, .finale__card { order: 0; }
  .finale__side { padding-bottom: var(--space-4); }
}

/* ---------- Nav: tablet+ (two rows) and wide desktop (4-column grid) ---------- */
@media (min-width: 768px) {
  html { scroll-padding-top: 6rem; }

  .nav__row { min-height: 40px; gap: var(--space-5); }
  .nav__row--sub { display: flex; justify-content: space-between; min-height: 34px; border-top: 1px solid var(--border); }
  .nav__mobile { display: none; }

  .nav__links { display: flex; gap: var(--space-5); margin-left: auto; }
  .nav__row .nav__email { display: inline-flex; margin-left: var(--space-5); }
  .nav__group a { padding-block: 2px; }
  .copy-email { min-height: 28px; }
  .lang__pill { padding: 2px; }
  .lang__opt { min-height: 24px; min-width: 34px; font-size: 0.75rem; }
  .logo--nav { width: 56px; }
}

@media (min-width: 1200px) {
  .nav__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-4);
  }
  .nav__links {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 2 / 4;
    grid-row: 1;
    margin-left: 0;
  }
  .nav__row .nav__email { grid-column: 4; justify-self: end; margin-left: 0; }
  .nav__row--sub { display: flex; }
}

/* ==========================================================================
   Breakpoints (mobile-first): 768 / 1024 / 1440
   ========================================================================== */
@media (min-width: 768px) {



}

@media (min-width: 1024px) {
  .hero { padding-bottom: var(--space-7); }



}


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  [data-words] .word { opacity: 1; }
}