/* ==========================================================================
   MASCHA STUDIO — Creative Direction Studio powered by AI
   styles.css  ·  Phase 1
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Fonts
   02. Tokens
   03. Reset & base
   04. Typography primitives
   05. Layout primitives
   06. Atmosphere (gradient light, grain, beams)
   07. Buttons & links
   08. Loader
   09. Navigation
   10. Hero
   11. Client logo rail
   12. Selected work
   13. Services preview
   14. About preview
   15. Shop preview
   16. Final CTA
   17. Footer
   18. Interior page shell (placeholder pages)
   19. Motion system / reveal states
   20. Responsive
   21. Reduced motion & print
   ========================================================================== */

/* ==========================================================================
   01. FONTS
   --------------------------------------------------------------------------
   MaschaDisplay is the brand display face. Drop the real font files into
   assets/brand/fonts/ using EXACTLY these names and the whole site picks them up:

       assets/brand/fonts/MaschaDisplay-Bold.woff2
       assets/brand/fonts/MaschaDisplay-Black.woff2

   Until those files exist the browser silently falls back to the system
   grotesque stack below — no errors, no layout shift beyond metrics.
   ========================================================================== */

@font-face {
  font-family: 'MaschaDisplay';
  src: url('../assets/brand/fonts/MaschaDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MaschaDisplay';
  src: url('../assets/brand/fonts/MaschaDisplay-Black.woff2') format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   02. TOKENS
   ========================================================================== */

:root {
  /* — Brand colour — */
  --black: #050505;
  --pink: #dd1e6a;
  --orange: #e75e2d;
  --yellow: #eec41a;
  --white: #f7f7f4;

  /* — Derived surfaces — */
  --ink: var(--white);
  --ink-60: rgba(247, 247, 244, 0.6);
  --ink-45: rgba(247, 247, 244, 0.45);
  --ink-30: rgba(247, 247, 244, 0.3);
  --ink-14: rgba(247, 247, 244, 0.14);
  --ink-08: rgba(247, 247, 244, 0.08);
  --surface: #0a0a0a;
  --surface-2: #0e0d0f;

  /* — Signature gradients — */
  --grad-line: linear-gradient(
    100deg,
    var(--pink) 0%,
    var(--orange) 52%,
    var(--yellow) 100%
  );
  --grad-text: linear-gradient(
    92deg,
    var(--pink) 0%,
    var(--orange) 46%,
    var(--yellow) 92%
  );
  --grad-hard: linear-gradient(
    135deg,
    var(--pink) 0%,
    var(--orange) 45%,
    var(--yellow) 100%
  );

  /* — Type — */
  --font-display: 'MaschaDisplay', 'SF Pro Display', -apple-system,
    BlinkMacSystemFont, 'Helvetica Neue', 'Arial Black', Helvetica, sans-serif;
  --font-ui: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas,
    monospace;

  /* Fluid display scale — everything keys off the viewport.
     --fs-mega is tuned so "PEOPLE REMEMBER." sets on a single line from
     ~1100px up, and breaks to two words per line on phones. */
  --fs-mega: clamp(2.2rem, 6.4vw, 7.2rem);
  --fs-display: clamp(2.5rem, 7.4vw, 8.5rem);
  --fs-h2: clamp(2.2rem, 6.2vw, 6.5rem);
  --fs-h3: clamp(1.6rem, 3.4vw, 3.2rem);
  --fs-lead: clamp(1.05rem, 1.55vw, 1.5rem);
  --fs-body: clamp(0.98rem, 1.05vw, 1.12rem);
  --fs-meta: clamp(0.68rem, 0.78vw, 0.82rem);

  /* — Space — */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-y: clamp(6rem, 14vh, 13rem);
  --max: 1680px;

  /* — Motion — */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.28s;
  --dur: 0.62s;
  --dur-slow: 1.1s;

  --nav-h: clamp(64px, 8vh, 88px);
  --radius: 2px; /* precision over softness — almost no rounding */
  --radius-lg: 6px; /* cards and panels only — never on media */

  /* — Aliases —
     Semantic names for the tokens above, so newer sections can read as
     intent ("70% ink") instead of as a hard-coded alpha step. */
  --ink-70: rgba(247, 247, 244, 0.7);
  --ink-50: rgba(247, 247, 244, 0.5);
  --ink-15: rgba(247, 247, 244, 0.15);
  --brand-pink: var(--pink);
  --grad-brand: var(--grad-line);
}

/* ==========================================================================
   03. RESET & BASE
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--black);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  font-synthesis-weight: none;
}

/* Locks scroll while the loader runs and while the mobile menu is open */
body.is-locked {
  overflow: hidden;
}

img,
video,
svg,
canvas {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: var(--pink);
  color: var(--white);
}

/* Visible, on-brand focus for keyboard users only */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  padding: 0.9rem 1.4rem;
  background: var(--white);
  color: var(--black);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-110%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   04. TYPOGRAPHY PRIMITIVES
   ========================================================================== */

.display,
.h2,
.h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
}
.display--mega {
  font-size: var(--fs-mega);
  line-height: 0.84;
  letter-spacing: -0.045em;
}
.h2 {
  font-size: var(--fs-h2);
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 0.95;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.42;
  color: var(--ink-60);
  max-width: 46ch;
  text-wrap: pretty;
}

/* Editorial eyebrow: [ LABEL ] — a recurring micro-detail across the site */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.eyebrow::before {
  content: '';
  width: 1.6rem;
  height: 1px;
  background: var(--grad-line);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* Gradient text — the brand's light applied to type */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Keeps the glyph edges from clipping on tight descenders */
  padding-bottom: 0.06em;
}

/* Outline type — used for counterpoint in oversized headlines */
.outline-text {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-30);
}

/* ==========================================================================
   05. LAYOUT PRIMITIVES
   ========================================================================== */

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

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(3.5rem, 7vh, 6rem);
}

/* Hairline rules — precision detailing */
.rule {
  height: 1px;
  background: var(--ink-14);
  border: 0;
}
.rule--grad {
  height: 1px;
  background: var(--grad-line);
  opacity: 0.7;
  border: 0;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

/* ==========================================================================
   06. ATMOSPHERE — light, energy, grain
   --------------------------------------------------------------------------
   Built from hard-edged light shafts and directional glows rather than soft
   floating blobs. Everything here is pointer-events:none and GPU-composited.
   ========================================================================== */

/* Film grain — one fixed layer over the whole document */
.grain {
  position: fixed;
  inset: -120px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grain-shift 6s steps(6) infinite;
}

@keyframes grain-shift {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-40px, 20px, 0); }
  40% { transform: translate3d(30px, -30px, 0); }
  60% { transform: translate3d(-20px, -20px, 0); }
  80% { transform: translate3d(40px, 30px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Cursor-responsive light — desktop only, positioned by JS custom properties */
.cursor-light {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 62vmax;
  height: 62vmax;
  margin: -31vmax 0 0 -31vmax;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle closest-side,
    rgba(238, 196, 26, 0.16),
    rgba(231, 94, 45, 0.1) 38%,
    rgba(221, 30, 106, 0.06) 62%,
    transparent 78%
  );
  transform: translate3d(var(--mx, 50vw), var(--my, 40vh), 0);
  transition: opacity 0.9s var(--ease-out);
  will-change: transform;
}
.cursor-light.is-live {
  opacity: 1;
}

/* Atmosphere container used inside hero + CTA */
.atmos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* The signature light shaft — a hard beam of colour raking across the frame */
.atmos__beam {
  position: absolute;
  top: -30%;
  left: -25%;
  width: 150%;
  height: 78%;
  transform: rotate(-18deg) translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  background: linear-gradient(
    92deg,
    transparent 0%,
    rgba(221, 30, 106, 0) 26%,
    rgba(233, 24, 120, 0.72) 46%,
    rgba(231, 94, 45, 0.92) 64%,
    rgba(238, 196, 26, 0.95) 79%,
    rgba(255, 252, 245, 0.8) 90%,
    transparent 99%
  );
  filter: blur(38px);
  opacity: 0.62;
  animation: beam-drift 18s var(--ease-in-out) infinite alternate;
  will-change: transform, opacity;
}

.atmos__beam--secondary {
  top: 34%;
  left: -40%;
  height: 42%;
  transform: rotate(-11deg);
  filter: blur(96px);
  opacity: 0.34;
  animation-duration: 26s;
  animation-direction: alternate-reverse;
}

@keyframes beam-drift {
  from {
    transform: rotate(-18deg) translate3d(-4%, -3%, 0) scaleY(1);
    opacity: 0.4;
  }
  to {
    transform: rotate(-14deg) translate3d(5%, 4%, 0) scaleY(1.18);
    opacity: 0.62;
  }
}

/* Hot core of the light source — where the beam originates */
.atmos__core {
  position: absolute;
  right: -16%;
  top: 2%;
  width: 42vw;
  height: 42vw;
  min-width: 340px;
  min-height: 340px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 253, 246, 1) 0%,
    rgba(255, 246, 215, 0.92) 6%,
    rgba(238, 196, 26, 0.6) 15%,
    rgba(231, 94, 45, 0.3) 30%,
    rgba(221, 30, 106, 0.14) 48%,
    transparent 68%
  );
  filter: blur(22px);
  opacity: 0.85;
  animation: core-pulse 9s var(--ease-in-out) infinite alternate;
  will-change: transform, opacity;
}

@keyframes core-pulse {
  from { transform: scale(1); opacity: 0.62; }
  to { transform: scale(1.1); opacity: 0.88; }
}

/* Technical grid — precision detailing behind the light */
.atmos__grid {
  position: absolute;
  inset: 0;
  opacity: 0.9;
  background-image: linear-gradient(
      to right,
      rgba(247, 247, 244, 0.07) 1px,
      transparent 1px
    );
  background-size: calc(100% / 6) 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
}

/* Vignette to keep the black deep at the edges */
.atmos__vignette {
  position: absolute;
  inset: 0;
  background:
    /* Deepens the black on the left so oversized type stays razor-sharp
       and the light clearly reads as coming from one direction. */
    linear-gradient(
      to right,
      rgba(5, 5, 5, 0.9) 0%,
      rgba(5, 5, 5, 0.62) 24%,
      rgba(5, 5, 5, 0.18) 52%,
      transparent 78%
    ),
    radial-gradient(
      130% 95% at 62% 34%,
      transparent 34%,
      rgba(5, 5, 5, 0.5) 76%,
      var(--black) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(5, 5, 5, 0.75),
      transparent 26%,
      transparent 58%,
      var(--black)
    );
}

/* ==========================================================================
   07. BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-fg: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 1.05em 1.9em;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--btn-fg);
  border: 1px solid var(--ink-30);
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

/* Gradient wipe fills from the bottom on hover */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-hard);
  transform: translate3d(0, 101%, 0);
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  color: var(--black);
  border-color: transparent;
}
.btn:hover::before,
.btn:focus-visible::before {
  transform: translate3d(0, 0, 0);
}
.btn:active {
  transform: scale(0.98);
}

.btn__arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow {
  transform: translate(3px, -3px);
}

.btn--solid {
  color: var(--black);
  background: var(--white);
  border-color: var(--white);
}
.btn--solid::before {
  transform: translate3d(0, 0, 0);
  background: var(--white);
}
.btn--solid:hover,
.btn--solid:focus-visible {
  color: var(--black);
}
.btn--solid:hover::before,
.btn--solid:focus-visible::before {
  background: var(--grad-hard);
}

.btn--ghost-dark {
  --btn-fg: var(--black);
  border-color: rgba(5, 5, 5, 0.35);
}
.btn--ghost-dark::before {
  background: var(--black);
}
.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible {
  color: var(--white);
}

.btn--lg {
  padding: 1.25em 2.4em;
  font-size: clamp(0.72rem, 0.9vw, 0.9rem);
}

/* Inline text link with a gradient underline that wipes in */
.link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--grad-line);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==========================================================================
   08. LOADER
   ========================================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--black);
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}

/* The curtain lifts to reveal the site */
.loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--black);
  transform-origin: top;
  transition: transform 0.9s var(--ease-out);
}

.loader__inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}

.loader__mark {
  width: clamp(180px, 26vw, 320px);
  opacity: 0;
  animation: loader-mark 1s var(--ease-out) forwards;
}

@keyframes loader-mark {
  from { opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

.loader__bar {
  position: relative;
  width: clamp(180px, 26vw, 320px);
  height: 1px;
  background: var(--ink-14);
  overflow: hidden;
}
.loader__bar span {
  position: absolute;
  inset: 0;
  background: var(--grad-line);
  transform: scaleX(0);
  transform-origin: left;
  animation: loader-bar 1.35s var(--ease-in-out) forwards;
}

@keyframes loader-bar {
  0% { transform: scaleX(0); }
  70% { transform: scaleX(0.72); }
  100% { transform: scaleX(1); }
}

.loader__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-30);
}

/* Exit state */
.loader.is-done .loader__inner {
  opacity: 0;
  transform: translateY(-10px);
}
.loader.is-done::after {
  transform: scaleY(0);
}
.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ==========================================================================
   09. NAVIGATION
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: transform var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    backdrop-filter var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
  border-bottom: 1px solid transparent;
}

/* Condensed state once the user scrolls past the fold */
.nav.is-scrolled {
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--ink-08);
}

/* Hides on scroll-down, returns on scroll-up */
.nav.is-hidden {
  transform: translateY(-102%);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav__logo {
  flex: none;
  display: block;
  line-height: 0;
}
.nav__logo img {
  width: clamp(96px, 9vw, 132px);
  height: auto;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav__logo:hover img {
  opacity: 0.7;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.4rem);
}

.nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
  padding-block: 0.4rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--grad-line);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover,
.nav__link:focus-visible {
  color: var(--white);
}
.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__link[aria-current='page'] {
  color: var(--white);
}
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

/* Academy es la otra mitad del negocio, no una promo: un punto de gradiente
   basta para señalarla sin convertir el enlace en un botón. */
.nav__link--academy { padding-right: 0.6rem; }
.nav__link--academy::before {
  content: '';
  position: absolute;
  top: 0.3rem;
  right: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--grad-line);
}

/* El punto va pegado a la palabra, no al margen: en el cajón los enlaces
   ocupan todo el ancho, así que se limita la caja al texto. */
.nav-drawer__list a[href$="academy.html"] {
  position: relative;
  width: max-content;
  max-width: 100%;
  padding-right: 0.7rem;
}
.nav-drawer__list a[href$="academy.html"]::after {
  content: '';
  position: absolute;
  top: 0.55em;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad-line);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}
.nav__cta {
  padding: 0.75em 1.35em;
}

/* Burger */
.nav__burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--ink-14);
  border-radius: 100px;
}
.nav__burger span {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--white);
  transform: translateX(-50%);
  transition: transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { bottom: 17px; }

.nav__burger[aria-expanded='true'] span:nth-child(1) {
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}
.nav__burger[aria-expanded='true'] span:nth-child(2) {
  bottom: 21.5px;
  transform: translateX(-50%) rotate(-45deg);
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
  background: var(--black);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.nav-drawer.is-open {
  visibility: visible;
  opacity: 1;
}

.nav-drawer__list {
  display: grid;
  gap: 0.2rem;
  position: relative;
  z-index: 2;
}
.nav-drawer__list a {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 11vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out),
    color 0.3s var(--ease-out);
}
.nav-drawer.is-open .nav-drawer__list a {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.06s * var(--i, 0) + 0.1s);
}
.nav-drawer__list a:hover {
  color: var(--yellow);
}

.nav-drawer__foot {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 2.5rem;
  display: grid;
  gap: 1.2rem;
}

/* ==========================================================================
   10. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 4vh);
  padding-bottom: clamp(1.75rem, 5vh, 3.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   SHOWREEL SLOT
   Drop a file at assets/home/showreel/mascha-showreel.mp4 and JS will detect it and
   mount it here automatically as a muted, looping, playsinline background.
   If the file is absent the animated gradient atmosphere shows instead —
   nothing breaks and no request errors are thrown.
   -------------------------------------------------------------------------- */
.hero__reel {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero__reel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__reel.is-ready {
  opacity: 0.55;
}
/* When the reel plays, calm the gradient down so type stays legible */
.hero.has-reel .atmos__beam { opacity: 0.26; }
.hero.has-reel .atmos__core { opacity: 0.35; }

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__eyebrow {
  margin-bottom: clamp(1.2rem, 3vh, 2.2rem);
}

.hero__title {
  margin-bottom: clamp(1.6rem, 4vh, 2.8rem);
}
.hero__title .line + .line {
  margin-top: -0.02em;
}
/* Second line carries the gradient — the "idea" is the light */
.hero__title .line:last-child .line__inner {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-top: clamp(1.2rem, 3vh, 2rem);
  border-top: 1px solid var(--ink-14);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Runs vertically down the right edge so it never collides with the copy */
.hero__scroll {
  position: absolute;
  right: calc(var(--gutter) - 0.35rem);
  bottom: clamp(7rem, 16vh, 11rem);
  z-index: 2;
  display: none;
}

.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-30);
}
.scroll-cue__track {
  position: relative;
  width: 1px;
  height: 56px;
  background: var(--ink-14);
  overflow: hidden;
}
.scroll-cue__track::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--grad-line);
  animation: cue 2.4s var(--ease-in-out) infinite;
}
@keyframes cue {
  0% { transform: translateY(0); }
  100% { transform: translateY(200%); }
}

/* ==========================================================================
   11. CLIENT LOGO RAIL
   ========================================================================== */

.clients {
  position: relative;
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
  border-block: 1px solid var(--ink-08);
  overflow: hidden;
}

.clients__label {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-bottom: clamp(1.5rem, 3vh, 2.4rem);
}

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  /* Fades the rail into the black at both ends */
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-right: clamp(2.5rem, 6vw, 6rem);
  animation: marquee 42s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

/* Client slot: swap the <span> for an <img> when real logos arrive */
.client {
  flex: none;
  display: grid;
  place-items: center;
  min-width: clamp(120px, 12vw, 190px);
  height: clamp(38px, 4.5vw, 56px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink-30);
  transition: color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
/* Real client logos.
   The caps are in pixels, not percentages: a percentage max-height against a
   grid area whose size depends on its content resolves to none, which let the
   full-resolution logo render at its natural 1600px width. */
.client img {
  width: auto;
  height: auto;
  max-height: clamp(30px, 3.6vw, 46px);
  max-width: clamp(120px, 14vw, 210px);
  object-fit: contain;
  filter: grayscale(1) brightness(2);
  opacity: 0.45;
  transition: opacity var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out);
}
.client:hover {
  color: var(--white);
}
.client:hover img {
  opacity: 1;
  filter: grayscale(0) brightness(1);
}

/* ==========================================================================
   12. SELECTED WORK
   --------------------------------------------------------------------------
   Deliberately NOT a four-up card grid: a sticky index rail on the left plus
   an asymmetric editorial stack of four differently-sized, differently-placed
   projects on the right.
   ========================================================================== */

.work {
  position: relative;
}

.work__layout {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 4.2fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

/* Pinned storytelling rail */
.work__rail {
  position: sticky;
  top: calc(var(--nav-h) + 3vh);
  display: grid;
  gap: 1.4rem;
  align-content: start;
}
.work__rail-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
}
.work__rail-count span {
  color: var(--ink-30);
}
.work__rail-bar {
  position: relative;
  width: 100%;
  max-width: 120px;
  height: 2px;
  background: var(--ink-14);
  overflow: hidden;
}
.work__rail-bar i {
  position: absolute;
  inset: 0;
  background: var(--grad-line);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

.work__list {
  display: grid;
  gap: clamp(4rem, 12vh, 11rem);
}

/* Composition variants — each project sits differently in the column */
.project {
  position: relative;
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.project--wide { width: 100%; }
.project--offset {
  width: min(100%, 72%);
  margin-left: auto;
}
.project--tall {
  width: min(100%, 52%);
}
.project--full {
  width: 100%;
}

.project__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--ink-08);
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  isolation: isolate;
}
.project--tall .project__media { aspect-ratio: 4 / 5; }

/* Oversized by 14% vertically so the parallax drift can never expose an
   edge gap at the top or bottom of the frame. */
.project__media img,
.project__media video {
  position: absolute;
  left: 0;
  top: -7%;
  width: 100%;
  height: 114%;
  object-fit: cover;
  transition: transform 1s var(--ease-out), opacity 0.6s var(--ease-out);
  will-change: transform;
}
.project__media video {
  opacity: 0;
  z-index: 1;
}
.project__media.is-playing video { opacity: 1; }
/* Scale via a custom property so it composes with the parallax translate
   instead of overwriting it (see [data-parallax] in section 19). */
.project:hover .project__media img { --pscale: 1.045; }

/* Corner ticks — precision micro-detail on every media frame */
.project__media::before,
.project__media::after {
  content: '';
  position: absolute;
  z-index: 3;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(247, 247, 244, 0.55);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.project__media::before {
  top: 14px; left: 14px;
  border-right: 0; border-bottom: 0;
  transform: translate(6px, 6px);
}
.project__media::after {
  bottom: 14px; right: 14px;
  border-left: 0; border-top: 0;
  transform: translate(-6px, -6px);
}
.project:hover .project__media::before,
.project:hover .project__media::after {
  opacity: 1;
  transform: none;
}

/* Gradient edge light that rakes across on hover */
.project__media .glint {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(238, 196, 26, 0.18) 50%,
    rgba(221, 30, 106, 0.14) 60%,
    transparent 72%
  );
  opacity: 0;
  transform: translateX(-30%);
  transition: opacity 0.5s var(--ease-out), transform 1.1s var(--ease-out);
}
.project:hover .project__media .glint {
  opacity: 1;
  transform: translateX(30%);
}

.project__index {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  color: rgba(247, 247, 244, 0.7);
  mix-blend-mode: difference;
}

.project__info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  align-items: baseline;
}

.project__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 4.2rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.project__title span {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}
.project:hover .project__title span {
  transform: translateX(0.12em);
}

.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  align-items: center;
}
.project__meta .dot {
  width: 3px;
  height: 3px;
  background: var(--ink-30);
  border-radius: 50%;
}

.project__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.project__cta i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ink-30);
  border-radius: 100px;
  font-style: normal;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.project:hover .project__cta i {
  background: var(--grad-hard);
  border-color: transparent;
  color: var(--black);
  transform: rotate(45deg);
}

.work__more {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(3rem, 8vh, 6rem);
}

/* ==========================================================================
   13. SERVICES PREVIEW — interactive editorial list
   ========================================================================== */

.services {
  position: relative;
  overflow: hidden;
}

.services__list {
  position: relative;
  border-top: 1px solid var(--ink-14);
}

.service {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--ink-14);
  overflow: hidden;
}

.service__row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 0.85fr) 3rem;
  gap: clamp(0.75rem, 2vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.3rem, 3.4vh, 2.5rem);
  transition: padding-inline var(--dur) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.service:hover .service__row,
.service:focus-visible .service__row {
  padding-inline: clamp(0.75rem, 2vw, 2rem);
}

/* Gradient sweeps in behind the row */
.service__fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--grad-hard);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.66s var(--ease-out);
}
.service:hover .service__fill,
.service:focus-visible .service__fill {
  transform: translate3d(0, 0, 0);
}
.service:hover .service__row,
.service:focus-visible .service__row {
  color: var(--black);
}
.service:hover .service__num,
.service:hover .service__desc,
.service:focus-visible .service__num,
.service:focus-visible .service__desc {
  color: rgba(5, 5, 5, 0.72);
}
.service:hover .service__arrow,
.service:focus-visible .service__arrow {
  color: var(--black);
  transform: rotate(45deg);
}

.service__num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  color: var(--ink-30);
  transition: color var(--dur-fast) var(--ease-out);
}

.service__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.45rem, 3.6vw, 3.1rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.service__desc {
  font-size: clamp(0.85rem, 1vw, 1rem);
  color: var(--ink-45);
  transition: color var(--dur-fast) var(--ease-out);
  text-wrap: pretty;
}

.service__arrow {
  justify-self: end;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-30);
  transition: transform var(--dur) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.services__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

/* ==========================================================================
   14. ABOUT PREVIEW
   ========================================================================== */

.about {
  position: relative;
}

.about__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}

.about__media {
  position: relative;
}
.about__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink-08);
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  background: var(--surface);
}
/* Oversized so the parallax drift stays inside the frame */
.about__frame img {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

/* Gradient rim light behind the portrait */
.about__media::before {
  content: '';
  position: absolute;
  inset: -8% -6% -6% -8%;
  z-index: -1;
  background: radial-gradient(
    60% 60% at 20% 15%,
    rgba(221, 30, 106, 0.34),
    rgba(231, 94, 45, 0.16) 45%,
    transparent 72%
  );
  filter: blur(40px);
}

.about__tag {
  position: absolute;
  left: 0;
  bottom: clamp(-1.4rem, -2vw, -1rem);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.1rem;
  background: var(--black);
  border: 1px solid var(--ink-14);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about__tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad-hard);
}

.about__body {
  display: grid;
  gap: clamp(1.25rem, 3vh, 2rem);
  justify-items: start;
}

.about__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
  padding-top: clamp(1rem, 2vh, 1.5rem);
  border-top: 1px solid var(--ink-14);
}
.about__stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about__stat span {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* ==========================================================================
   15. SHOP PREVIEW — deliberately a different visual register
   ========================================================================== */

.shop {
  position: relative;
  background: var(--surface-2);
  border-block: 1px solid var(--ink-08);
  overflow: hidden;
}

/* A slow gradient wash that only lives in this section */
.shop::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 90%;
  background: conic-gradient(
    from 200deg at 50% 50%,
    rgba(221, 30, 106, 0.22),
    rgba(231, 94, 45, 0.18) 25%,
    rgba(238, 196, 26, 0.2) 45%,
    transparent 62%,
    rgba(221, 30, 106, 0.22) 100%
  );
  filter: blur(90px);
  opacity: 0.75;
  animation: shop-turn 34s linear infinite;
  pointer-events: none;
}
@keyframes shop-turn {
  to { transform: rotate(360deg); }
}

.shop__inner {
  position: relative;
  z-index: 2;
}

.shop__head {
  display: grid;
  gap: clamp(1rem, 2.5vh, 1.75rem);
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(2.5rem, 7vh, 5rem);
}
.shop__head .h2 {
  max-width: 16ch;
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.product {
  position: relative;
  display: grid;
  align-content: end;
  gap: 1rem;
  min-height: clamp(360px, 46vh, 560px);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--ink-14);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.product:hover {
  border-color: var(--ink-30);
  transform: translateY(-4px);
}

.product__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.product__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transition: transform 1.2s var(--ease-out), opacity var(--dur) var(--ease-out);
}
.product:hover .product__bg img {
  transform: scale(1.06);
  opacity: 0.68;
}
.product__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5, 5, 5, 0.94) 8%,
    rgba(5, 5, 5, 0.55) 48%,
    rgba(5, 5, 5, 0.2) 100%
  );
}

.product__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.9rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.product__name sup {
  font-size: 0.34em;
  vertical-align: super;
  letter-spacing: 0;
}

.product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-14);
}

.shop__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

/* ==========================================================================
   16. FINAL CTA
   ========================================================================== */

.cta {
  position: relative;
  min-height: clamp(520px, 82vh, 900px);
  display: grid;
  align-content: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}

.cta__atmos .atmos__beam {
  top: -10%;
  height: 120%;
  transform: rotate(-8deg);
  filter: blur(70px);
  opacity: 0.62;
}
.cta__atmos .atmos__core {
  right: auto;
  left: -12%;
  top: 30%;
}

.cta__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1.75rem, 4vh, 3rem);
  justify-items: start;
}

.cta__title {
  max-width: 16ch;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid var(--ink-14);
  width: 100%;
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.footer {
  position: relative;
  padding-top: clamp(3.5rem, 9vh, 6rem);
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid var(--ink-08);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
}

.footer__brand {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}
.footer__logo {
  width: clamp(150px, 16vw, 240px);
}

.footer__col h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-30);
  margin-bottom: 1.25rem;
}
.footer__col ul {
  display: grid;
  gap: 0.7rem;
}
.footer__col a {
  color: var(--ink-60);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover,
.footer__col a:focus-visible {
  color: var(--white);
}

/* Oversized footer wordmark — the last brand beat on the page */
.footer__mega {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 19vw, 20rem);
  line-height: 0.78;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.9;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  user-select: none;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid var(--ink-08);
}

/* ==========================================================================
   18. INTERIOR PAGE SHELL — used by the Phase 2 placeholder pages
   ========================================================================== */

.page-hero {
  position: relative;
  display: grid;
  align-content: end;
  min-height: clamp(420px, 62vh, 720px);
  padding-top: calc(var(--nav-h) + 6vh);
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1rem, 2.5vh, 1.75rem);
  justify-items: start;
}

.page-note {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  max-width: 62ch;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--ink-14);
  border-left: 2px solid transparent;
  border-image: var(--grad-line) 1;
  border-radius: var(--radius);
  background: var(--surface);
}

.page-outline {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink-14);
}
.page-outline li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: clamp(1rem, 2.4vh, 1.6rem);
  border-bottom: 1px solid var(--ink-14);
}
.page-outline b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.page-outline p {
  color: var(--ink-45);
  margin-top: 0.35rem;
}

/* ==========================================================================
   19. MOTION SYSTEM
   ========================================================================== */

/* --- Line mask reveal (JS wraps each line in .line > .line__inner) --- */
.line {
  display: block;
  overflow: hidden;
  /* a hair of breathing room so descenders aren't clipped */
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.line__inner {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.085s);
}
.is-revealed .line__inner,
.line.is-revealed .line__inner {
  transform: translateY(0);
}

/* --- Generic scroll-triggered entrance --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
[data-reveal='fade'] {
  transform: none;
}
[data-reveal='scale'] {
  transform: scale(0.965);
}
[data-reveal='left'] {
  transform: translateX(-32px);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* --- Hairline draw-in --- */
[data-reveal='rule'] {
  opacity: 1;
  transform: none;
  transform-origin: left;
  scale: 0 1;
  transition: scale 1.1s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
[data-reveal='rule'].is-revealed {
  scale: 1 1;
}

/* --- Parallax targets (JS writes --py) ---
   --pscale lets hover states add a zoom without clobbering the translate. */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--pscale, 1));
}

/* --- Page transition curtain --- */
.transition {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--black);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
  transition: transform 0.55s var(--ease-in-out);
}
.transition.is-active {
  transform: scaleY(1);
  transform-origin: bottom;
}

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

@media (min-width: 900px) {
  .hero__scroll { display: block; }
}

@media (max-width: 1180px) {
  .work__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .work__rail {
    position: static;
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  .work__rail-bar { max-width: 90px; }
  .project--offset,
  .project--tall { width: 100%; }
  .project--tall .project__media { aspect-ratio: 3 / 2; }
}

@media (max-width: 1024px) {
  .nav__menu { display: none; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }

  .about__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 8vw, 4rem);
  }
  .about__frame { aspect-ratio: 3 / 4; }
  .about__media { max-width: 520px; }

  .service__row {
    grid-template-columns: 3rem minmax(0, 1fr) 2rem;
  }
  .service__desc {
    grid-column: 2 / 3;
    grid-row: 2;
    margin-top: 0.5rem;
  }

  .footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
  }

  .hero {
    min-height: 92svh;
  }
  .hero__foot {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
  }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }

  .project__info {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }
  .project--tall .project__media,
  .project__media { aspect-ratio: 4 / 3; }

  .shop__grid { grid-template-columns: minmax(0, 1fr); }
  .product { min-height: 340px; }

  .about__stats { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }

  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__bottom { flex-direction: column; }

  .page-outline li { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

@media (max-width: 460px) {
  .service__row { grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem; }
  .cta__actions .btn,
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* Coarse pointers get no cursor light and no hover-video */
@media (hover: none) {
  .cursor-light { display: none; }
}

/* ==========================================================================
   21. REDUCED MOTION & PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .grain { animation: none; }
  .marquee__track { animation: none; }
  .cursor-light { display: none; }

  /* Content must never be left hidden by a disabled animation */
  [data-reveal],
  [data-reveal='scale'],
  [data-reveal='left'] {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-reveal='rule'] { scale: 1 1 !important; }
  .line__inner { transform: none !important; }
  .loader { display: none; }
}

@media print {
  .nav, .loader, .grain, .cursor-light, .atmos, .transition { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   22. WORK CATALOG — square tile archive
   --------------------------------------------------------------------------
   All portfolio media is vertical 9:16 (1080 × 1920). The catalog crops it
   into a perfect square with object-fit: cover — the file itself is never
   altered and never distorted.
   ========================================================================== */

.catalog {
  padding-bottom: clamp(4rem, 10vh, 8rem);
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(3px, 0.45vw, 8px);
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius);
  isolation: isolate;
  /* Kills the 300ms tap delay and stops iOS long-press callouts on media */
  -webkit-touch-callout: none;
}

.tile__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tile__media img,
.tile__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The square crop. Vertical media is centred and cropped, never squashed. */
  object-fit: cover;
  object-position: center;
  transition: transform 1.1s var(--ease-out), opacity 0.55s var(--ease-out);
  will-change: transform;
}

.tile__media video {
  opacity: 0;
  z-index: 1;
}
.tile.is-playing .tile__media video { opacity: 1; }
/* Hold the poster under the video so there is never a flash of black */
.tile.is-playing .tile__media img { opacity: 1; }

.tile:hover .tile__media img,
.tile:focus-visible .tile__media img,
.tile.is-playing .tile__media img,
.tile:hover .tile__media video {
  transform: scale(1.055);
}

/* Controlled gradient veil — always present, deepens on hover */
.tile__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(5, 5, 5, 0.86) 0%,
    rgba(5, 5, 5, 0.45) 28%,
    rgba(5, 5, 5, 0.06) 56%,
    rgba(5, 5, 5, 0.28) 100%
  );
  opacity: 0.82;
  transition: opacity var(--dur) var(--ease-out);
}
.tile:hover .tile__veil,
.tile:focus-visible .tile__veil {
  opacity: 0.96;
}

/* A thin gradient hairline rakes in from the left on hover */
.tile__veil::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--grad-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.tile:hover .tile__veil::after,
.tile:focus-visible .tile__veil::after {
  transform: scaleX(1);
}

.tile__info {
  position: absolute;
  z-index: 3;
  left: clamp(0.7rem, 1.1vw, 1.35rem);
  right: clamp(0.7rem, 1.1vw, 1.35rem);
  bottom: clamp(0.7rem, 1.1vw, 1.35rem);
  display: grid;
  gap: 0.3em;
  transform: translateY(0);
  transition: transform var(--dur) var(--ease-out);
}
.tile:hover .tile__info,
.tile:focus-visible .tile__info {
  transform: translateY(-0.35rem);
}

.tile__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 1.35vw, 1.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.6em;
  font-family: var(--font-mono);
  font-size: clamp(0.56rem, 0.66vw, 0.72rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
  /* Revealed on hover so the resting grid stays quiet and image-led */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.tile:hover .tile__meta,
.tile:focus-visible .tile__meta {
  opacity: 1;
  transform: none;
}
.tile__meta .sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-30);
  flex: none;
}

/* Directional indicator, top-right */
.tile__cue {
  position: absolute;
  z-index: 3;
  top: clamp(0.6rem, 0.9vw, 1.1rem);
  right: clamp(0.6rem, 0.9vw, 1.1rem);
  display: grid;
  place-items: center;
  width: clamp(26px, 2.1vw, 34px);
  height: clamp(26px, 2.1vw, 34px);
  border: 1px solid rgba(247, 247, 244, 0.34);
  border-radius: 100px;
  font-size: 0.8em;
  line-height: 1;
  color: var(--white);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.tile:hover .tile__cue,
.tile:focus-visible .tile__cue {
  opacity: 1;
  transform: none;
  background: var(--grad-hard);
  border-color: transparent;
  color: var(--black);
}

/* Keyboard focus gets the same treatment as hover, plus a visible ring */
.tile:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  z-index: 4;
}

/* Live vertical-media badge, only when a preview is actually running */
.tile__badge {
  position: absolute;
  z-index: 3;
  top: clamp(0.6rem, 0.9vw, 1.1rem);
  left: clamp(0.6rem, 0.9vw, 1.1rem);
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.tile.is-playing .tile__badge { opacity: 1; }
.tile__badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--grad-hard);
}

.catalog__count {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  padding-bottom: clamp(0.75rem, 2vh, 1.1rem);
  border-bottom: 1px solid var(--ink-14);
}

/* ==========================================================================
   23. INDIVIDUAL PROJECT PAGE
   ========================================================================== */

.case-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3rem, 9vh, 7rem));
  padding-bottom: clamp(2rem, 6vh, 4rem);
  overflow: hidden;
  isolation: isolate;
}

.case-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1.25rem, 3vh, 2rem);
  justify-items: start;
}

.case-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}

.case-logo {
  max-width: clamp(120px, 14vw, 190px);
  height: auto;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

/* Fact row — client / year / category / services */
.case-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  width: 100%;
  margin-top: clamp(0.75rem, 2vh, 1.5rem);
  padding-top: clamp(1rem, 2.5vh, 1.75rem);
  border-top: 1px solid var(--ink-14);
}
.case-fact dt {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-30);
  margin-bottom: 0.55rem;
}
.case-fact dd {
  font-size: clamp(0.9rem, 1.05vw, 1.1rem);
  line-height: 1.35;
  color: var(--ink);
  text-wrap: pretty;
}
.case-fact dd.is-empty {
  color: var(--ink-30);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Primary vertical hero video — 9:16, never cropped ------------------ */
.case-primary {
  position: relative;
  padding-block: clamp(2rem, 6vh, 4.5rem);
}
.case-primary__frame {
  position: relative;
  width: min(100%, clamp(230px, 28vh, 330px));
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--ink-08);
  border-radius: var(--radius);
  background: var(--surface);
}
.case-primary__frame img,
.case-primary__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* container is already 9:16, so nothing is cut */
}
.case-primary__frame video { opacity: 0; transition: opacity 0.6s var(--ease-out); z-index: 1; }
.case-primary__frame.is-ready video { opacity: 1; }

/* Rim light behind the vertical frame */
.case-primary::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 12%;
  width: min(80vw, 720px);
  height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(231, 94, 45, 0.22),
    rgba(221, 30, 106, 0.12) 45%,
    transparent 72%
  );
  filter: blur(70px);
  pointer-events: none;
  z-index: -1;
}

/* --- Editorial vertical gallery ----------------------------------------
   Rejilla uniforme: cada pieza es idéntica en tamaño y proporción 9:16.
   Nada abarca dos columnas — el orden manda. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.4rem, 0.8vw, 0.9rem);
}

.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-lg);
  cursor: zoom-in;
  isolation: isolate;
  transition: border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
/* Un degradado propio en cada pieza: da profundidad y separa la rejilla
   del fondo negro sin necesidad de marcos. */
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(5, 5, 5, 0.45), transparent 42%);
  opacity: 0.85;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}
.gallery__item:hover,
.gallery__item:focus-visible {
  transform: translateY(-3px);
  border-color: var(--ink-30);
}
.gallery__item:hover::after { opacity: 0.35; }
.gallery__item:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.gallery__item img,
.gallery__item video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
  will-change: transform;
}
.gallery__item:hover img,
.gallery__item:hover video,
.gallery__item:focus-visible img,
.gallery__item:focus-visible video {
  transform: scale(1.035);
}

/* Toda pieza mide igual. La clase se conserva por compatibilidad pero ya
   no cambia el tamaño: la rejilla se mantiene perfectamente alineada. */
.gallery__item--wide {
  grid-column: span 1;
  aspect-ratio: 9 / 16;
}

.gallery__tag {
  position: absolute;
  z-index: 2;
  left: 0.6rem;
  bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.7em;
  background: rgba(5, 5, 5, 0.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.gallery__item:hover .gallery__tag,
.gallery__item:focus-visible .gallery__tag {
  opacity: 1;
  transform: none;
}

/* Sin hover que valga, la etiqueta se queda puesta: en el celular es la
   única señal de que la pieza es un video y se puede abrir. */
@media (hover: none) {
  .gallery__tag {
    opacity: 1;
    transform: none;
    left: 0.45rem;
    bottom: 0.45rem;
    padding: 0.32em 0.6em;
    font-size: 0.52rem;
  }
}

/* Empty-media state — keeps the page composed before real files land */
.case-empty {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  max-width: 62ch;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--ink-14);
  border-radius: var(--radius);
  background: var(--surface);
}

/* --- Project-to-project navigation ------------------------------------- */
.case-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(3rem, 8vh, 6rem);
  border-top: 1px solid var(--ink-14);
  border-bottom: 1px solid var(--ink-14);
  background: var(--ink-14);
}
.case-nav a,
.case-nav span {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.25rem, 3vh, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  background: var(--black);
  transition: background var(--dur) var(--ease-out);
}
.case-nav a:hover,
.case-nav a:focus-visible { background: var(--surface-2); }
.case-nav .case-nav__dir {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-30);
}
.case-nav .case-nav__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 1.7vw, 1.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.case-nav__mid { text-align: center; }
.case-nav__next { text-align: right; }
.case-nav span.is-disabled { opacity: 0.32; }

/* ==========================================================================
   24. LIGHTBOX
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.9rem, 2vh, 1.4rem) clamp(1rem, 3vw, 2rem);
}

.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 clamp(0.75rem, 3vw, 2rem);
}

/* Media is height-bound so 9:16 always fits without cropping or distortion.
   The caps are viewport units, NOT percentages: a percentage max-height against
   a grid area sized by its own content resolves to none, which let the media
   render at full natural resolution and overflow the screen.
   The subtracted space is the top bar plus the bottom control row. */
.lightbox__media {
  max-width: min(92vw, 1100px);
  max-height: calc(100vh - 172px);
  max-height: calc(100dvh - 172px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out);
}
.lightbox__media.is-shown {
  opacity: 1;
  transform: none;
}

.lightbox__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid var(--ink-30);
  border-radius: 100px;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--white);
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.lightbox__btn:hover,
.lightbox__btn:focus-visible {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.lightbox__btn[disabled] {
  opacity: 0.28;
  pointer-events: none;
}

.lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(0.9rem, 2vh, 1.5rem);
}
.lightbox__counter {
  min-width: 6ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  color: var(--ink-60);
}

/* Arrow buttons sit over the stage edges on wide screens */
@media (min-width: 900px) {
  .lightbox__stage .lightbox__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .lightbox__stage .lightbox__btn--prev { left: clamp(1rem, 3vw, 2.5rem); }
  .lightbox__stage .lightbox__btn--next { right: clamp(1rem, 3vw, 2.5rem); }
  .lightbox__nav .lightbox__btn--prev,
  .lightbox__nav .lightbox__btn--next { display: none; }
}
@media (max-width: 899px) {
  .lightbox__stage .lightbox__btn { display: none; }
}

/* ==========================================================================
   25. WORK / PROJECT RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
  /* 3 square columns on tablet */
  .catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* 3 columnas en tablet — la rejilla se mantiene uniforme */
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-primary__frame { width: min(100%, 280px); }
}

@media (max-width: 640px) {
  /* 2 square columns on mobile */
  .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Dos columnas en móvil — sigue ordenado y no gigante */
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

  .case-facts { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

  .case-nav { grid-template-columns: minmax(0, 1fr); }
  .case-nav__mid, .case-nav__next { text-align: left; }

  /* Meta stays visible on touch, where there is no hover to reveal it */
  .tile__meta { opacity: 1; transform: none; }
  .tile__cue { opacity: 1; transform: none; }
}

@media (hover: none) {
  .tile__meta { opacity: 1; transform: none; }
  .tile__cue { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tile__media img,
  .tile__media video,
  .gallery__item img,
  .gallery__item video { transform: none !important; }
  .tile__meta,
  .tile__cue { opacity: 1 !important; transform: none !important; }
  .lightbox__media { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   26. PROJECT CLASSIFICATION NOTICE
   --------------------------------------------------------------------------
   States plainly whether a project was commissioned or is an independent
   concept. Never implies a commercial relationship that is not confirmed.
   ========================================================================== */

.case-status {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  max-width: 68ch;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.6rem);
  border: 1px solid var(--ink-14);
  border-left: 2px solid var(--ink-30);
  border-radius: var(--radius);
  background: var(--surface);
}
.case-status__label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.case-status__text {
  font-size: clamp(0.85rem, 0.98vw, 1rem);
  line-height: 1.5;
  color: var(--ink-45);
  text-wrap: pretty;
}
.case-status--concept { border-left-color: var(--yellow); }
.case-status--client { border-left-color: var(--pink); }
.case-status--concept .case-status__label { color: var(--yellow); }
.case-status--client .case-status__label { color: var(--pink); }

/* ==========================================================================
   27. PROJECT HERO — pantalla partida
   --------------------------------------------------------------------------
   Al entrar a un proyecto se ve obra de inmediato: la ficha se compacta a la
   izquierda y tres piezas verticales ocupan la derecha a altura completa.
   ========================================================================== */

.case-hero--lean {
  display: grid;
  padding-top: calc(var(--nav-h) + clamp(1.75rem, 5vh, 4rem));
  padding-bottom: clamp(1.25rem, 3vh, 2rem);
  padding-inline: var(--gutter);
  max-width: var(--max);
  margin-inline: auto;
}

/* --- columna de texto, más compacta que antes --- */
.case-hero--lean .case-hero__inner {
  padding-inline: 0;
  max-width: none;
  gap: clamp(0.9rem, 2vh, 1.4rem);
}

.case-hero--lean .case-hero__title {
  font-size: clamp(2.1rem, 4.6vw, 5.2rem);
  line-height: 0.9;
}

.case-hero--lean .lead {
  font-size: clamp(0.95rem, 1.15vw, 1.18rem);
  max-width: 34ch;
}

.case-credits .case-status { padding: 0.9rem 1.1rem; }

/* --------------------------------------------------------------------------
   FICHA DE PROYECTO — nombre, obra, créditos (en ese orden)
   --------------------------------------------------------------------------
   Antes el hero ocupaba la pantalla entera con una vitrina de tres piezas
   escalonadas encima. Ahora el nombre ocupa lo justo y la obra empieza
   inmediatamente, en una rejilla pareja: de dos en dos en el celular.
   -------------------------------------------------------------------------- */

.case-hero--lean .case-hero__head {
  display: grid;
  gap: clamp(0.7rem, 1.8vh, 1.2rem);
  justify-items: start;
}

/* --- "Mascha created" + lo que se hizo, debajo del nombre --------------- */
.case-made {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.case-made__k {
  color: var(--ink-45);
  margin-right: 0.25rem;
}
.case-made__s {
  padding: 0.36rem 0.72rem;
  border: 1px solid var(--ink-15);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(5, 5, 5, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 640px) {
  .case-made { font-size: 0.6rem; gap: 0.35rem 0.4rem; }
  .case-made__s { padding: 0.32rem 0.6rem; }
  .case-made__k { width: 100%; margin: 0 0 0.15rem; }
}

/* Sólo queda la nota de encargo / concepto propio */
.case-credits { padding-top: clamp(1.5rem, 4vh, 2.5rem); }

@media (max-width: 1100px) {
  .case-hero--lean .case-hero__title { font-size: clamp(2.4rem, 8vw, 4.5rem); }
  .case-hero--lean .lead { max-width: 52ch; }
}

@media (max-width: 640px) {
  /* Sólo el nombre y, enseguida, la obra. */
  .case-hero--lean {
    padding-top: calc(var(--nav-h) + 1.25rem);
    padding-bottom: 1rem;
  }
  .case-hero--lean .lead { font-size: 0.95rem; }
  .case-hero--lean + .section--tight { padding-top: 0.75rem; }

}

/* ==========================================================================
   28. PROJECT HERO — legibilidad y aire en móvil
   ========================================================================== */

/* La descripción iba al 60% de opacidad sobre el degradado encendido y no
   se leía. En la ficha de proyecto sube a 88% y gana una sombra suave. */
.case-hero--lean .lead {
  color: rgba(247, 247, 244, 0.88);
  text-shadow: 0 1px 24px rgba(5, 5, 5, 0.55);
}

@media (max-width: 1100px) {
  /* Menos aire muerto entre bloques */
  .case-hero--lean { padding-bottom: clamp(1.25rem, 3vh, 2rem); }
  /* La atmósfera baja de intensidad detrás del texto, para que se lea */
  .case-hero--lean .atmos__core { opacity: 0.4; }
  .case-hero--lean .atmos__beam { opacity: 0.34; }
}

@media (max-width: 640px) {
  /* Un velo sutil bajo el texto: el degradado deja de competir */
  .case-hero--lean .case-hero__head::before {
    content: '';
    position: absolute;
    inset: -1rem calc(var(--gutter) * -1) -1rem;
    z-index: -1;
    background: linear-gradient(
      to bottom,
      rgba(5, 5, 5, 0.5),
      rgba(5, 5, 5, 0.72) 55%,
      rgba(5, 5, 5, 0.4)
    );
    pointer-events: none;
  }
  .case-hero--lean .case-hero__head { position: relative; z-index: 2; }
}

@media (max-width: 640px) {
  /* La galería empezaba 204px abajo del bloque de datos. Se comprime:
     menos padding de sección y el encabezado de media en una sola línea. */
  .case-hero--lean + .section--tight { padding-top: clamp(1.25rem, 3vh, 2rem); }

  .catalog__count {
    gap: 0.35rem 1rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.7rem;
  }
  .catalog__count p + p {
    font-size: 0.6rem;
    color: var(--ink-30);
  }
}

/* ==========================================================================
   29. CONTACT — directo, sin formularios
   ========================================================================== */

.contact {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  align-content: center;
  padding-top: calc(var(--nav-h) + 4vh);
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.contact__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1.5rem, 4vh, 2.75rem);
  justify-items: start;
}

.contact__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 6.5rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Cada dato es una línea grande y clicable */
.contact__list {
  display: grid;
  gap: 0;
  width: 100%;
  border-top: 1px solid var(--ink-14);
}

.contact__row {
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 2.5rem;
  gap: clamp(0.75rem, 2vw, 2rem);
  align-items: center;
  padding-block: clamp(1.1rem, 2.8vh, 1.9rem);
  border-bottom: 1px solid var(--ink-14);
  overflow: hidden;
  transition: padding-inline var(--dur) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* El degradado entra por abajo, igual que en la lista de servicios */
.contact__row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-hard);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.6s var(--ease-out);
}
.contact__row:hover,
.contact__row:focus-visible {
  padding-inline: clamp(0.75rem, 2vw, 1.75rem);
  color: var(--black);
}
.contact__row:hover::before,
.contact__row:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

.contact__label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-30);
  transition: color var(--dur-fast) var(--ease-out);
}
.contact__row:hover .contact__label,
.contact__row:focus-visible .contact__label { color: rgba(5, 5, 5, 0.7); }

.contact__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.7vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  word-break: break-word;
}

.contact__arrow {
  justify-self: end;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-30);
  transition: transform var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.contact__row:hover .contact__arrow,
.contact__row:focus-visible .contact__arrow {
  transform: rotate(45deg);
  color: var(--black);
}

.contact__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  padding-top: clamp(0.75rem, 2vh, 1.25rem);
}

@media (max-width: 640px) {
  .contact__row {
    grid-template-columns: minmax(0, 1fr) 2rem;
    gap: 0.35rem 1rem;
    padding-block: 1.1rem;
  }
  .contact__label { grid-column: 1 / -1; }
  .contact__arrow { grid-row: 2; }
}

/* ==========================================================================
   30. HOME — titular más contenido y resumen del sitio
   ========================================================================== */

/* El hero deja de comerse la pantalla: el titular baja y la promesa
   se lee de un vistazo junto con los accesos. */
.hero__title {
  max-width: 20ch;
}

/* Resumen: qué encuentras en el sitio, en una línea por sección */
.summary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-14);
  border-block: 1px solid var(--ink-14);
}

.summary__card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--black);
  overflow: hidden;
  isolation: isolate;
  transition: background var(--dur) var(--ease-out);
}
.summary__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-hard);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.6s var(--ease-out);
}
.summary__card:hover,
.summary__card:focus-visible { color: var(--black); }
.summary__card:hover::before,
.summary__card:focus-visible::before { transform: translate3d(0, 0, 0); }

.summary__num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  color: var(--ink-30);
  transition: color var(--dur-fast) var(--ease-out);
}
.summary__card:hover .summary__num { color: rgba(5, 5, 5, 0.65); }

.summary__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.summary__desc {
  font-size: clamp(0.85rem, 1vw, 1rem);
  line-height: 1.45;
  color: var(--ink-45);
  text-wrap: pretty;
  transition: color var(--dur-fast) var(--ease-out);
}
.summary__card:hover .summary__desc { color: rgba(5, 5, 5, 0.72); }

.summary__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.summary__go i {
  font-style: normal;
  transition: transform var(--dur) var(--ease-out);
}
.summary__card:hover .summary__go i { transform: rotate(45deg); }

@media (max-width: 900px) {
  .summary__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .summary__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   31. ABOUT US
   ========================================================================== */

/* --- Cita de origen, a escala editorial --- */
.origin {
  position: relative;
  overflow: hidden;
}
.origin__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
/* la entradilla acompaña la línea de tiempo mientras se lee */
@media (min-width: 901px) {
  .origin-lede { position: sticky; top: calc(var(--nav-h) + 3vh); }
}
.origin__quote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.origin__quote em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.origin__body {
  display: grid;
  gap: 1.1rem;
}
.origin__body p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-60);
  text-wrap: pretty;
}

/* --- Pilares: por qué el estudio es distinto --- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-14);
  border-block: 1px solid var(--ink-14);
}
.pillar {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
  background: var(--black);
}
.pillar__num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.2em;
  color: var(--ink-30);
}
.pillar__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.5vw, 2.1rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
.pillar__desc {
  font-size: clamp(0.88rem, 1vw, 1.02rem);
  line-height: 1.5;
  color: var(--ink-60);
  text-wrap: pretty;
}

/* --- Equipo --- */
.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.team__member {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.6vw, 2rem);
  border: 1px solid var(--ink-14);
  border-radius: var(--radius);
  background: var(--surface);
}
.team__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.team__role {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
}

@media (max-width: 900px) {
  .origin__layout { grid-template-columns: minmax(0, 1fr); }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .team { grid-template-columns: minmax(0, 1fr); }
}

/* --- About: reacciones de clientes --- */
.reactions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.reaction {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--ink-14);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out);
}
.reaction:hover { border-color: var(--ink-30); }
.reaction__quote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.reaction__quote::before { content: '“'; }
.reaction__quote::after { content: '”'; }
.reaction__who {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-30);
}

/* --- About: postura sobre la IA --- */
.stance {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.stance__inner {
  display: grid;
  gap: clamp(1.25rem, 3vh, 2rem);
  justify-items: start;
  max-width: 70ch;
}
.stance__line {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 4.4rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.stance__line em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}

@media (max-width: 760px) {
  .reactions { grid-template-columns: minmax(0, 1fr); }
}

/* --- About: proceso y límites --- */
.process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-14);
  border-block: 1px solid var(--ink-14);
}
.step {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: clamp(1.3rem, 2.8vw, 2.1rem);
  background: var(--black);
}
.step__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
.step__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.step__desc {
  font-size: clamp(0.84rem, 0.95vw, 0.96rem);
  line-height: 1.5;
  color: var(--ink-45);
  text-wrap: pretty;
}

.nots { display: grid; gap: 0; border-top: 1px solid var(--ink-14); }
.not {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 1.75rem);
  align-items: baseline;
  padding-block: clamp(0.9rem, 2.2vh, 1.5rem);
  border-bottom: 1px solid var(--ink-14);
}
.not__x {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--pink);
  line-height: 1;
}
.not__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.1vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.not__why {
  grid-column: 2;
  margin-top: 0.4rem;
  font-size: clamp(0.85rem, 1vw, 1rem);
  color: var(--ink-45);
  text-wrap: pretty;
}

@media (max-width: 900px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .process { grid-template-columns: minmax(0, 1fr); } }

/* --- About: el nombre --- */
.name-origin {
  display: grid;
  gap: clamp(1rem, 2.5vh, 1.75rem);
  justify-items: start;
}
.name-origin__line {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 5.4vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink-30);
  text-wrap: balance;
}
.name-origin__line b {
  font-weight: 800;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- About: nosotros vs agencia --- */
.versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-14);
  border: 1px solid var(--ink-14);
  border-radius: var(--radius);
  overflow: hidden;
}
.versus__col { background: var(--black); padding: clamp(1.4rem, 3vw, 2.4rem); }
.versus__col--us { background: var(--surface-2); }
.versus__head {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-30);
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--ink-14);
}
.versus__col--us .versus__head {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.versus__list { display: grid; gap: 0.9rem; }
.versus__list li {
  font-size: clamp(0.92rem, 1.15vw, 1.12rem);
  line-height: 1.4;
  color: var(--ink-45);
  text-wrap: pretty;
}
.versus__col--us .versus__list li {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 700px) { .versus { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   32. WORK — clientes y experimentos, separados
   ========================================================================== */

/* Título de la página más contenido */
.page-hero .display { font-size: clamp(2.1rem, 5.2vw, 5.4rem); }

/* Encabezado de cada bloque del catálogo */
.catalog__band {
  display: grid;
  gap: clamp(0.6rem, 1.5vh, 1rem);
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  padding-bottom: clamp(0.8rem, 2vh, 1.2rem);
  border-bottom: 1px solid var(--ink-14);
}
.catalog__band-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}
.catalog__band-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.catalog__band-title--experiments {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
.catalog__band-note {
  font-size: clamp(0.88rem, 1.05vw, 1.05rem);
  line-height: 1.45;
  color: var(--ink-45);
  max-width: 62ch;
  text-wrap: pretty;
}

/* El aire que separa un bloque del otro */
.catalog__band-group + .catalog__band-group {
  margin-top: clamp(4rem, 12vh, 9rem);
}

/* Regla de luz que marca el corte entre clientes y experimentos.
   El aire a ambos lados es lo que deja claro que son dos cosas distintas. */
.catalog__divide {
  height: 1px;
  border: 0;
  background: var(--grad-line);
  opacity: 0.55;
  margin-top: clamp(4.5rem, 13vh, 9rem);
  margin-bottom: clamp(3.5rem, 10vh, 7rem);
}

/* ==========================================================================
   33. SERVICIOS DESPLEGABLES  (<details> nativo — funciona sin JS)
   ========================================================================== */

.service-item {
  position: relative;
  border-bottom: 1px solid var(--ink-14);
  overflow: hidden;
}
.service-item > summary {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 3rem;
  gap: clamp(0.75rem, 2vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.2rem, 3vh, 2.2rem);
  cursor: pointer;
  list-style: none;
  transition: padding-inline var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.service-item > summary::-webkit-details-marker { display: none; }

/* El degradado entra por abajo, igual que en el resto del sitio */
.service-item > summary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-hard);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.6s var(--ease-out);
}
.service-item > summary:hover,
.service-item > summary:focus-visible { padding-inline: clamp(0.75rem, 2vw, 2rem); color: var(--black); }
.service-item > summary:hover::before,
.service-item > summary:focus-visible::before { transform: translate3d(0, 0, 0); }
.service-item[open] > summary { color: var(--black); padding-inline: clamp(0.75rem, 2vw, 2rem); }
.service-item[open] > summary::before { transform: translate3d(0, 0, 0); }

.service-item__num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.14em;
  color: var(--ink-30);
  transition: color var(--dur-fast) var(--ease-out);
}
.service-item > summary:hover .service-item__num,
.service-item[open] .service-item__num { color: rgba(5, 5, 5, 0.7); }

.service-item__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.45rem, 3.6vw, 3.1rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

/* El signo gira a × cuando está abierto */
.service-item__sign {
  justify-self: end;
  position: relative;
  width: 22px;
  height: 22px;
  transition: transform var(--dur) var(--ease-out);
}
.service-item__sign::before,
.service-item__sign::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur) var(--ease-out);
}
.service-item__sign::before { width: 22px; height: 1.5px; }
.service-item__sign::after { width: 1.5px; height: 22px; }
.service-item[open] .service-item__sign { transform: rotate(135deg); }

.service-item__panel {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 2.5rem);
  padding-bottom: clamp(1.4rem, 3.5vh, 2.4rem);
  padding-inline: clamp(0.75rem, 2vw, 2rem);
}
.service-item__body { display: grid; gap: 1rem; justify-items: start; max-width: 62ch; }
.service-item__body p {
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink-60);
  text-wrap: pretty;
}
.service-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.service-item__tags span {
  padding: 0.4em 0.8em;
  border: 1px solid var(--ink-14);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* La animación de apertura */
.service-item[open] .service-item__panel { animation: svc-open 0.45s var(--ease-out); }
@keyframes svc-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .service-item > summary { grid-template-columns: 2.5rem minmax(0, 1fr) 1.75rem; }
  .service-item__panel { grid-template-columns: minmax(0, 1fr); padding-left: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .service-item[open] .service-item__panel { animation: none; }
}

/* ==========================================================================
   35. SERVICES — filas alternadas con obra real
   --------------------------------------------------------------------------
   La lista de texto no vendía nada. Cada servicio ahora se demuestra con dos
   piezas verticales reales al lado de lo que entregamos.
   ========================================================================== */

.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 8vh, 6rem) 0;
  border-top: 1px solid var(--ink-08);
}
.svc-row:first-of-type { border-top: 0; }
.svc-row--flip .svc-row__aside { order: -1; }

.svc-row__body { display: grid; gap: clamp(1rem, 2.2vh, 1.5rem); justify-items: start; }

.svc-row__num {
  font-family: var(--font-mono);
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.svc-row__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.svc-row__copy {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 46ch;
  margin: 0;
}
.svc-row__list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.svc-row__list li {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--ink-15);
  border-radius: 999px;
}

/* --- panel tipográfico (sin imágenes: la obra vive en /work) ------------- */
.svc-row__aside {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.9rem;
  min-height: clamp(200px, 26vh, 320px);
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(221, 30, 106, 0.14), transparent 60%),
    radial-gradient(110% 80% at 0% 100%, rgba(238, 196, 26, 0.10), transparent 62%),
    var(--surface);
  overflow: hidden;
  isolation: isolate;
}
.svc-row__aside::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-line);
  opacity: 0.85;
}
.svc-row__ghost {
  position: absolute;
  right: -0.06em;
  bottom: -0.32em;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(7rem, 17vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--ink);
  opacity: 0.05;
  user-select: none;
}
.svc-row__aside-copy { display: grid; gap: 0.55rem; max-width: 34ch; }
.svc-row__aside-t {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}
.svc-row__aside-d {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-70);
  margin: 0;
}

/* --- proceso ------------------------------------------------------------- */
.svc-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2rem, 5vh, 3rem);
}
.svc-step {
  display: grid;
  gap: 0.6rem;
  padding-top: 1.1rem;
  border-top: 2px solid transparent;
  border-image: var(--grad-brand) 1;
  border-image-slice: 1;
  border-width: 2px 0 0 0;
}
.svc-step__k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.svc-step__t {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}
.svc-step__d { font-size: 0.92rem; line-height: 1.55; color: var(--ink-70); margin: 0; }

@media (max-width: 900px) {
  .svc-row {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vh, 2.25rem);
  }
  .svc-row--flip .svc-row__aside { order: 0; }
  .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .svc-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   36. SHOP — programas y guías descargables
   ========================================================================== */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.shop-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.shop-card:hover { transform: translateY(-4px); border-color: var(--ink-15); }
.shop-card:hover::before { transform: scaleX(1); }

/* el par de programas insignia ocupa el ancho completo */
.shop-card--flagship {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: clamp(1.8rem, 3.4vw, 2.9rem);
}
.shop-card--flagship::before { transform: scaleX(1); }
.shop-card--flagship .shop-card__body { display: grid; gap: 0.85rem; }

.shop-card__kind {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.shop-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}
.shop-card--flagship .shop-card__title { font-size: clamp(1.8rem, 4vw, 3.1rem); }
.shop-card__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-70);
  margin: 0;
  max-width: 54ch;
}
.shop-card__meta {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--ink-08);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.shop-card__status { color: var(--brand-pink); }

.shop-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: clamp(2.5rem, 6vh, 4rem) 0 clamp(1.25rem, 3vh, 2rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--ink-08);
}
.shop-band__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 0;
}
.shop-band__note {
  font-size: 0.92rem;
  color: var(--ink-50);
  margin: 0;
  max-width: 48ch;
}

@media (max-width: 720px) {
  .shop-card--flagship {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* ==========================================================================
   37. ABOUT — origen en línea de tiempo legible
   --------------------------------------------------------------------------
   El bloque anterior abría con "MADRID." y una cita: bonito, pero no se
   entendía dónde ni cómo empezó. Ahora la historia se lee en orden.
   ========================================================================== */

.origin-lede {
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 30ch;
  margin: 0;
}
.origin-lede em {
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.origin-steps {
  display: grid;
  gap: clamp(1.5rem, 3.5vh, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.origin-step {
  display: grid;
  grid-template-columns: clamp(6.5rem, 12vw, 9.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding-top: clamp(1.1rem, 2.5vh, 1.6rem);
  border-top: 1px solid var(--ink-08);
}
.origin-step:first-child { border-top: 0; padding-top: 0; }

.origin-step__k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-pink);
  padding-top: 0.35rem;
}
.origin-step__c { display: grid; gap: 0.6rem; }
.origin-step__t {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}
.origin-step__d {
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink-70);
  margin: 0;
  max-width: 58ch;
}

@media (max-width: 640px) {
  .origin-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
  }
  .origin-step__k { padding-top: 0; }
}

/* ==========================================================================
   38. MASCHA ACADEMY — catálogo luminoso (/academy)
   --------------------------------------------------------------------------
   Es la única página clara del sitio: fondo ivory, texto negro y el color
   de marca como acento. La barra y el pie siguen siendo los mismos
   componentes; sólo se les invierte el color mientras se está aquí.
   ========================================================================== */

/* Los tokens viven en el <body>, no en el <main>: la barra y el pie quedan
   fuera de <main> y también necesitan leerlos. */
.academy-page {
  --ac-pink: #e42590;
  --ac-orange: #e55d2d;
  --ac-yellow: #eec41a;
  --ac-ivory: #f7f5f0;
  --ac-paper: #fffefb;
  --ac-ink: #101010;
  --ac-ink-60: rgba(16, 16, 16, 0.62);
  --ac-ink-40: rgba(16, 16, 16, 0.42);
  --ac-line: rgba(16, 16, 16, 0.12);
  --ac-grad: linear-gradient(100deg, var(--ac-pink) 0%, var(--ac-orange) 52%, var(--ac-yellow) 100%);
}

.academy {
  background: var(--ac-ivory);
  color: var(--ac-ink);
}

/* --- barra en negativo mientras la página es clara ---------------------- */
.academy-page .nav__link { color: var(--ac-ink-60); }
.academy-page .nav__link:hover,
.academy-page .nav__link:focus-visible,
.academy-page .nav__link[aria-current='page'] { color: #101010; }
.academy-page .nav__logo img { filter: invert(1); }
.academy-page .nav__burger { border-color: rgba(16, 16, 16, 0.2); }
.academy-page .nav__burger span { background: #101010; }
.academy-page .nav.is-scrolled {
  background: rgba(247, 245, 240, 0.82);
  border-bottom-color: rgba(16, 16, 16, 0.1);
}
.academy-page .nav__cta {
  --btn-fg: #f7f5f0;
  color: #f7f5f0;
  background: #101010;
  border-color: #101010;
}
.academy-page .nav__cta:hover,
.academy-page .nav__cta:focus-visible { color: #101010; }
.academy-page .grain { opacity: 0.14; }

/* Botones dentro de la página clara */
.academy .btn { --btn-fg: #101010; color: #101010; border-color: rgba(16,16,16,.28); }
.academy .btn--solid {
  color: var(--ac-ivory);
  background: #101010;
  border-color: #101010;
}
.academy .btn--solid::before { background: #101010; }
.academy .btn--solid:hover,
.academy .btn--solid:focus-visible { color: #101010; }
.academy .btn--solid:hover::before,
.academy .btn--solid:focus-visible::before { background: var(--ac-grad); }
.academy .btn:focus-visible { outline: 2px solid var(--ac-pink); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   HERO — corto a propósito: el catálogo tiene que asomar enseguida
   -------------------------------------------------------------------------- */
.ac-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(1.5rem, 5vh, 3.5rem)) 0 clamp(1.5rem, 4vh, 2.5rem);
  overflow: hidden;
}
.ac-hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  width: min(70vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(228,37,144,.22), rgba(229,93,45,.14) 45%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.ac-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(0.9rem, 2.2vh, 1.4rem);
  justify-items: start;
}
.ac-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-ink-40);
}
.ac-eyebrow::before {
  content: '';
  width: clamp(22px, 3vw, 40px);
  height: 2px;
  background: var(--ac-grad);
}
.ac-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0;
  max-width: 20ch;
}
.ac-grad-text {
  background: var(--ac-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ac-hero__lead {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.5;
  color: var(--ac-ink-60);
  max-width: 44ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   CATÁLOGO
   -------------------------------------------------------------------------- */
.ac-section { padding-block: clamp(2.5rem, 7vh, 5rem); }
/* El catálogo va pegado al hero: la primera tarjeta tiene que asomar
   dentro del primer viewport, no debajo de él. */
.ac-hero + .ac-section { padding-top: clamp(0.75rem, 2vh, 1.5rem); }
.ac-head {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  max-width: 52ch;
}
.ac-head__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}
.ac-head__note {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ac-ink-60);
  margin: 0;
}

.ac-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.6rem);
}

/* --- tarjeta de curso --------------------------------------------------- */
.course {
  display: flex;
  flex-direction: column;
  background: var(--ac-paper);
  border: 1px solid var(--ac-line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.course:hover,
.course:focus-within {
  transform: translateY(-4px);
  border-color: rgba(16, 16, 16, 0.2);
  box-shadow: 0 18px 40px -22px rgba(16, 16, 16, 0.45);
}

.course__cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 1.25rem;
  overflow: hidden;
  text-decoration: none;
}
.course__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Portada generada: misma colección, distinto color por curso */
.course__mark {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: center;
  color: #fffefb;
  text-wrap: balance;
}
.course--pink   .course__cover { background: linear-gradient(140deg, #e42590, #b3195f); }
.course--orange .course__cover { background: linear-gradient(140deg, #e55d2d, #c23c17); }
.course--yellow .course__cover { background: linear-gradient(140deg, #eec41a, #d19a05); }
.course--yellow .course__mark  { color: #101010; }
.course--ink    .course__cover { background: linear-gradient(140deg, #23202b, #0b0b0d); }
.course--sun    .course__cover { background: linear-gradient(140deg, #eec41a, #e55d2d); }
.course--sun    .course__mark  { color: #101010; }
.course--berry  .course__cover { background: linear-gradient(140deg, #e42590, #e55d2d); }

.course__badge {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.34em 0.75em;
  border-radius: 999px;
  background: rgba(255, 254, 251, 0.92);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #101010;
}

.course__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.05rem, 2vw, 1.4rem);
  flex: 1;
}
.course__cat {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ac-pink);
}
.course__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.course__link { color: inherit; text-decoration: none; }
/* La tarjeta entera es clicable, sin robarle el foco al botón */
.course__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.course { position: relative; }
.course__link:focus-visible { outline: 2px solid var(--ac-pink); outline-offset: 3px; }

.course__desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ac-ink-60);
  /* dos líneas como máximo, tal cual */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
}
.course__facts li {
  padding: 0.3em 0.66em;
  border: 1px solid var(--ac-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-ink-60);
}

.course__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ac-line);
}
.course__price {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.course__price--soon {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-ink-40);
}
.course__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.72em 1.15em;
  border-radius: 999px;
  background: #101010;
  color: var(--ac-paper);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.course:hover .course__cta { background: var(--ac-grad); color: #101010; }
.course__cta--soon {
  background: transparent;
  color: var(--ac-ink-40);
  border: 1px solid var(--ac-line);
}
.course:hover .course__cta--soon { background: transparent; color: var(--ac-ink); }

/* --------------------------------------------------------------------------
   BENEFICIOS
   -------------------------------------------------------------------------- */
.ac-perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ac-perk {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  border-radius: 20px;
  background: var(--ac-paper);
  border: 1px solid var(--ac-line);
}
.ac-perk__n {
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: var(--ac-grad);
}
.ac-perk__t {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.ac-perk__d { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ac-ink-60); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.ac-faq { border-top: 1px solid var(--ac-line); max-width: 62rem; }
.ac-faq__item { border-bottom: 1px solid var(--ac-line); }
.ac-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.98rem, 1.6vw, 1.18rem);
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}
.ac-faq__item summary::-webkit-details-marker { display: none; }
.ac-faq__item summary:hover { color: var(--ac-pink); }
.ac-faq__item summary:focus-visible { outline: 2px solid var(--ac-pink); outline-offset: 3px; }
.ac-faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease-out);
}
.ac-faq__sign::before,
.ac-faq__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ac-grad);
}
.ac-faq__sign::after { transform: rotate(90deg); }
.ac-faq__item[open] .ac-faq__sign { transform: rotate(135deg); }
.ac-faq__panel {
  margin: 0;
  padding: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ac-ink-60);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   CTA FINAL
   -------------------------------------------------------------------------- */
.ac-close {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: 26px;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(228,37,144,.16), transparent 62%),
    radial-gradient(80% 100% at 100% 100%, rgba(238,196,26,.18), transparent 60%),
    var(--ac-paper);
  border: 1px solid var(--ac-line);
}
.ac-close__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  max-width: 18ch;
}
.ac-close__copy {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ac-ink-60);
  max-width: 46ch;
}

.ac-noscript {
  padding: 1.1rem 1.3rem;
  border-radius: 16px;
  border: 1px solid var(--ac-line);
  background: var(--ac-paper);
  color: var(--ac-ink-60);
}

/* --------------------------------------------------------------------------
   RESPONSIVE — el móvil manda
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .ac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-perks { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .ac-hero { padding-top: calc(var(--nav-h) + 1.25rem); padding-bottom: 1.25rem; }
  .ac-hero__title { font-size: 8.6vw; max-width: none; }
  .ac-hero__lead { font-size: 0.98rem; }
  .ac-hero .btn { width: 100%; justify-content: center; min-height: 52px; }

  .ac-section { padding-block: 2rem; }
  .ac-head { margin-bottom: 1.1rem; }

  /* Una tarjeta por renglón, casi todo el ancho */
  .ac-grid { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .course__cover { aspect-ratio: 16 / 9; }
  .course__name { font-size: 1.12rem; }
  .course__foot { padding-top: 1rem; }
  .course__cta { padding: 0.95em 1.25em; min-height: 48px; }

  .ac-close { padding: 1.75rem 1.25rem; border-radius: 20px; }
  .ac-close .btn { width: 100%; justify-content: center; min-height: 52px; }
}

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

/* --- lista de espera: una caja de correo, nada más ----------------------- */
.ac-waitlist {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  padding: clamp(1.6rem, 4vw, 2.75rem);
  border-radius: 24px;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(228,37,144,.14), transparent 60%),
    var(--ac-paper);
  border: 1px solid var(--ac-line);
}
.ac-waitlist__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 22ch;
}
.ac-waitlist__copy {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ac-ink-60);
  max-width: 44ch;
}
.ac-waitlist__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  max-width: 30rem;
  margin-top: 0.25rem;
}
.ac-waitlist__input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.95em 1.2em;
  border: 1px solid var(--ac-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ac-ink);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  min-height: 52px;
}
.ac-waitlist__input::placeholder { color: var(--ac-ink-40); }
.ac-waitlist__input:focus-visible {
  outline: 2px solid var(--ac-pink);
  outline-offset: 2px;
  border-color: transparent;
}
.ac-waitlist__send {
  flex: 0 0 auto;
  padding: 0.95em 1.6em;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: #101010;
  color: var(--ac-paper);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ac-waitlist__send:hover,
.ac-waitlist__send:focus-visible { background: var(--ac-grad); color: #101010; }
.ac-waitlist__send:focus-visible { outline: 2px solid var(--ac-pink); outline-offset: 3px; }
.ac-waitlist__fine {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-ink-40);
}
/* el campo trampa para robots: invisible y fuera del foco */
.ac-waitlist__hp { position: absolute; left: -9999px; opacity: 0; }

@media (max-width: 620px) {
  .ac-waitlist { padding: 1.4rem 1.15rem; border-radius: 20px; }
  .ac-waitlist__form { flex-direction: column; }
  /* En columna, flex-basis pasa a ser altura: los 14rem del campo lo
     estiraban a 224px de alto. Aquí manda el ancho. */
  .ac-waitlist__input { flex: 0 0 auto; width: 100%; }
  .ac-waitlist__send { width: 100%; }
}

/* ==========================================================================
   40. HOME — carrusel de obra al abrir la página
   --------------------------------------------------------------------------
   Lo primero que se ve después del titular: obra real de Mascha corriendo,
   no texto. Para cambiar las imágenes basta con editar los <img> del
   carrusel en index.html; viven en assets/home/carousel/.
   ========================================================================== */

.reel {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1rem, 3vh, 2rem);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.reel__track {
  display: flex;
  gap: clamp(0.5rem, 1.1vw, 1rem);
  width: max-content;
  animation: reel-run 64s linear infinite;
  will-change: transform;
}
.reel:hover .reel__track,
.reel:focus-within .reel__track { animation-play-state: paused; }

@keyframes reel-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.reel__item {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(150px, 15vw, 250px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-08);
  background: var(--surface);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.reel__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,.55), transparent 50%);
  opacity: 0.9;
  transition: opacity var(--dur) var(--ease-out);
}
.reel__item:hover { transform: translateY(-5px); border-color: var(--ink-30); }
.reel__item:hover::after { opacity: 0.3; }


@media (max-width: 640px) {
  .reel__item { width: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel__track { animation: none; overflow-x: auto; }
}

/* --- Home: servicios como lista, no como acordeón con párrafos --------- */
.svc-lines { display: grid; border-top: 1px solid var(--ink-08); }
.svc-line {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2.6vh, 1.75rem) 0;
  border-bottom: 1px solid var(--ink-08);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.svc-line::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: 0;
  background: var(--grad-line);
  transition: width 0.6s var(--ease-out);
}
.svc-line:hover::after,
.svc-line:focus-visible::after { width: 100%; }
.svc-line:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }

.svc-line__n {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: transparent;
  background: var(--grad-line);
  -webkit-background-clip: text;
  background-clip: text;
}
.svc-line__t {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 3.4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  transition: transform var(--dur) var(--ease-out);
}
.svc-line:hover .svc-line__t { transform: translateX(8px); }
.svc-line__go { color: var(--ink-30); transition: color var(--dur-fast) var(--ease-out); }
.svc-line:hover .svc-line__go { color: var(--ink); }

@media (max-width: 640px) {
  .svc-line { gap: 0.9rem; padding: 0.95rem 0; }
  .svc-line__t { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-line__t, .svc-line::after { transition: none; }
}

/* El hero del Home cede altura para que el carrusel asome al abrir:
   lo primero que se ve es obra, no sólo el titular. */
.hero:has(+ .reel) { min-height: 76svh; }
@media (max-width: 640px) {
  .hero:has(+ .reel) { min-height: 68svh; }
}

/* ==========================================================================
   41. PORTADA — MASCHA enorme sobre fotos que cambian
   --------------------------------------------------------------------------
   Las imágenes salen de assets/home/1-portada/ (01.jpg, 02.jpg...).
   Cambian cada 10 segundos con un fundido. Ver el LEEME de esa carpeta.
   ========================================================================== */

.portada {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: calc(var(--nav-h) + 3vh) var(--gutter) clamp(2rem, 6vh, 4rem);
  overflow: hidden;
  isolation: isolate;
}

/* --- las fotos, una encima de otra, fundiéndose --- */
.portada__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.portada__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s var(--ease-in-out), transform 10s linear;
}
.portada__foto.is-on {
  opacity: 1;
  transform: scale(1);            /* zoom lentísimo mientras está en pantalla */
}

/* Velo para que el nombre siempre se lea sobre cualquier foto */
.portada__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Tres capas: base pareja, refuerzo al centro donde va el nombre, y
     remate arriba y abajo. Así cualquier foto, por clara que sea, deja
     leer la marca sin tener que elegir fotos oscuras. */
  background:
    radial-gradient(54% 42% at 50% 50%, rgba(5,5,5,.52), rgba(5,5,5,.14) 72%, transparent 100%),
    linear-gradient(to top, rgba(5,5,5,.88) 0%, rgba(5,5,5,.2) 40%, rgba(5,5,5,.2) 62%, rgba(5,5,5,.62) 100%);
}

/* En vertical la foto tiene menos superficie: el velo se afloja para que
   no se vuelva un rectángulo negro. La sombra del logotipo hace el resto. */
@media (max-width: 640px) {
  .portada__velo {
    background:
      radial-gradient(70% 34% at 50% 48%, rgba(5,5,5,.5), rgba(5,5,5,.12) 75%, transparent 100%),
      linear-gradient(to top, rgba(5,5,5,.85) 0%, rgba(5,5,5,.15) 42%, rgba(5,5,5,.15) 64%, rgba(5,5,5,.55) 100%);
  }
}

/* --- el nombre --- */
.portada__inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(1rem, 3vh, 2rem);
  max-width: var(--max);
  margin-inline: auto;
  width: 100%;
}
.portada__marca {
  width: min(86vw, 900px);
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 40px rgba(5, 5, 5, 0.55));
}
.portada__marca-wrap { margin: 0; line-height: 0; }
.portada__lema {
  margin-top: clamp(1.1rem, 3vh, 2rem);
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 1.1vw, 0.8rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  text-shadow: 0 1px 18px rgba(5, 5, 5, 0.9);
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
/* El botón de contorno se pierde sobre una foto clara */
.portada__acciones .btn:not(.btn--solid) {
  border-color: rgba(247, 247, 244, 0.6);
  background: rgba(5, 5, 5, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* --- puntitos de posición --- */
.portada__pasos {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
}
.portada__paso {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-30);
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), width var(--dur) var(--ease-out);
}
.portada__paso.is-on { width: 22px; border-radius: 999px; background: var(--grad-line); }
.portada__paso:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

@media (max-width: 640px) {
  .portada { min-height: 92svh; }
  .portada__marca { width: 88vw; }
  .portada__lema { letter-spacing: 0.22em; font-size: 0.58rem; }
  .portada__acciones .btn { flex: 1 1 100%; justify-content: center; min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .portada__foto { transition: opacity 0.3s linear; transform: none; }
  .portada__foto.is-on { transform: none; }
}