/* Moisés Morao — home: escenas ligadas al scroll. Se carga después de site.css */


.paren { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.paren::before { content: '( '; } .paren::after { content: ' )'; }
.big-serif { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 4vw, 66px); line-height: 1.06; letter-spacing: -.035em; }
.big-serif em { font-style: normal; font-weight: 600; }
.w { display: inline-block; will-change: opacity; }

/* ---------- Cabecera y menú ---------- */
.header { z-index: 60; }
.header__brand { font-size: clamp(24px, 2.2vw, 32px); line-height: .9; }
.menu-btn, .menu-btn:is(*) {
  display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 1px solid currentColor; border-radius: 50%;
  position: relative; z-index: 2; transition: transform .5s var(--ease);
}
.menu-btn:hover { transform: scale(1.08); }
.menu-btn i { position: absolute; width: 20px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.menu-btn i:first-child { transform: translateY(-4px); }
.menu-btn i:last-child { transform: translateY(4px); width: 14px; margin-left: 6px; }
.menu-open .menu-btn i:first-child { transform: rotate(45deg); }
.menu-open .menu-btn i:last-child { transform: rotate(-45deg); width: 20px; margin-left: 0; }
.menu-open .header { mix-blend-mode: normal; color: var(--bone); }

.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--ink); color: var(--bone);
  display: grid; grid-template-rows: 1fr auto; padding-top: 92px;
  clip-path: inset(0 0 100% 0); pointer-events: none; transition: clip-path .9s var(--ease);
}
.menu-open .menu { clip-path: inset(0); pointer-events: auto; }
.menu__cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); min-height: 0; }
.menu__photo { position: relative; overflow: hidden; }
.menu__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; filter: grayscale(1); }
.menu__photo span { position: absolute; left: 24px; bottom: 22px; font-size: 17px; }
.menu__col {
  display: grid; place-items: center; background: var(--bone); color: var(--ink); border-left: 1px solid var(--line-light);
  font-family: var(--display); font-stretch: 62%; font-weight: 700; text-transform: uppercase; font-size: clamp(44px, 4.6vw, 76px); letter-spacing: .02em;
  transform: translateY(101%); transition: transform .9s var(--ease), background .4s, color .4s;
}
.menu-open .menu__col { transform: none; }
.menu__col:nth-child(3) { transition-delay: .06s, 0s, 0s; } .menu__col:nth-child(4) { transition-delay: .12s, 0s, 0s; } .menu__col:nth-child(5) { transition-delay: .18s, 0s, 0s; }
.menu__col:hover { background: var(--accent); color: #fff; }
.menu__bar { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; padding: 18px var(--gutter); }
.menu__bar div { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.menu__bar a:hover { text-decoration: underline; text-underline-offset: 5px; }
.menu__mail { font-size: 16px; letter-spacing: 0; text-transform: none; }
@media (max-width: 760px) {
  .menu__cols { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .menu__photo { display: none; }
  .menu__col { border-left: 0; font-size: 40px; }
}

/* ---------- Preloader ---------- */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #000; color: #fff; transition: transform 1.1s var(--ease); }
.intro__logo { width: min(58vw, 700px); overflow: visible; }
.intro__logo path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* El relleno es una sola forma con regla par-impar: así los huecos de la O, la R y la A quedan vacíos */
.intro__logo .intro__fill { stroke: none; fill: #fff; opacity: 0; transition: opacity .55s; }
.intro.is-full .intro__logo .intro__fill { opacity: 1; }
.intro__mark { display: grid; justify-items: center; gap: clamp(14px, 1.6vw, 24px); }
.intro__role { font-family: var(--serif); font-weight: 400; font-size: clamp(15.6px, 1.43vw, 20.8px); letter-spacing: .28em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .8s .5s, transform .8s .5s var(--ease); }
.intro.is-on .intro__role { opacity: 1; transform: none; }
.intro__bar { position: absolute; left: 50%; bottom: 30px; width: min(240px, 56vw); height: 3px; margin-left: calc(min(240px, 56vw) / -2); background: #fff; }
.intro__bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.intro__bar b { position: absolute; left: 0; bottom: 11px; transform: translateX(-50%); font: 500 10px/1 var(--sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.intro.s3 { transform: translateY(-101%); pointer-events: none; }
.no-intro .intro { display: none; }

/* ---------- Hero ---------- */
.hero2 { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #000; }
.hero2__photo { position: absolute; inset: 0; }
.hero2__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 6%; transform-origin: 62% 42%; transform: translateX(var(--shift, 0)) scale(1); transition: transform 2.4s var(--ease); }
/* La foto queda un 10 % más pequeña; el fondo negro de la propia foto se funde con el de la sección */
.is-ready .hero2__photo img { transform: translateX(var(--shift, 0)) scale(.9); }
/* En escritorio la foto se desplaza a la derecha para dejar el titular sobre el negro */
@media (min-width: 761px) { .hero2__photo { --shift: 17%; } }
.hero2__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 40%, transparent 60%), linear-gradient(0deg, #000 0%, transparent 20%); }
.hero2__text { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); max-width: min(92vw, 880px); }
/* Mismo tamaño que las frases blancas del manifiesto (.mani__s) */
.hero2__title { font-size: clamp(56px, min(9.6vw, 16.5vh), 176px); line-height: .88; }
/* Morganite tiene mayúsculas muy altas: la línea necesita aire arriba para no recortarlas */
.hero2__title .line { display: block; overflow: hidden; padding: .2em 0 .03em; margin-top: -.18em; }
.hero2__title .line:nth-child(3) { font-size: .3em; line-height: 1.3; padding: 0; margin-top: .05em; }
.hero2__title .line > span { display: block; transform: translateY(108%); transition: transform 1.2s var(--ease); }
.is-ready .hero2__title .line > span { transform: none; }
.hero2__title .line:nth-child(2) > span { transition-delay: .1s; } .hero2__title .line:nth-child(3) > span { transition-delay: .2s; }
.hero2__title em { font-size: 1em; }
.hero2__role { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 14px; align-items: baseline; white-space: nowrap; }
.hero2__role b { font-weight: 500; opacity: .55; }
.swap { display: inline-block; height: 1.25em; overflow: hidden; font-size: clamp(15px, 1.2vw, 18px); font-weight: 400; letter-spacing: -.01em; text-transform: none; vertical-align: bottom; }
.swap span { display: block; height: 1.25em; line-height: 1.25; transition: transform .7s var(--ease); }
@media (max-width: 760px) {
  .hero2__photo { inset: 0; }
  .hero2__photo img { object-position: 60% 20%; }
  .hero2__photo::after { background: linear-gradient(0deg, #000 10%, rgba(0,0,0,.2) 60%); }
  .hero2__text { top: auto; bottom: 110px; transform: none; }
}

/* ---------- Ancla ---------- */
.anchor { background: #050505; padding: clamp(70px, 9vw, 150px) var(--gutter); }
.anchor p.big-serif { max-width: 21em; margin: 26px 0 clamp(36px, 5vw, 72px); font-size: clamp(22px, 2.9vw, 48px); }
.anchor__foot { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; }
.anchor__foot .label { opacity: .5; }
.anchor__foot em { font-style: normal; font-size: clamp(17px, 1.6vw, 24px); }

/* ---------- Escenas fijas ---------- */
.scene { position: relative; }
.scene__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* Reel */
.reel { height: 240vh; background: var(--bone); color: var(--ink); }
.reel__pin { display: grid; place-items: center; }
.reel__top, .reel__big { position: absolute; left: 0; right: 0; text-align: center; }
.reel__top { top: 96px; font-size: clamp(32px, 3vw, 48px); }
.reel__big { bottom: 6vh; font-size: clamp(76px, 12vw, 210px); }
.reel__big small { display: block; margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(12px, 1.1vw, 16px); letter-spacing: .28em; word-spacing: 0; }
.reel__frame { position: relative; width: 82vw; height: 76svh; overflow: hidden; border-radius: 6px; background: #000; box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); transform: scale(.34); will-change: transform; }
.reel__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1s, transform 5s linear; }
.reel__frame img.is-on { opacity: 1; transform: scale(1); }
/* El vídeo llena el marco y se recorta a su proporción */
.reel__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__cap { position: absolute; left: 18px; bottom: 16px; color: #fff; mix-blend-mode: difference; z-index: 1; }

/* Manifiesto */
.mani { height: 600vh; background: #050505; }
.star-bg { position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; opacity: .07; pointer-events: none; will-change: transform; }
.mani__s { position: absolute; max-width: min(92vw, 16em); font-size: clamp(56px, min(9.6vw, 16.5vh), 176px); line-height: .88; opacity: 0; will-change: opacity, transform; }
.mani__s small { display: block; margin-top: .5em; font-family: var(--serif); font-style: normal; font-weight: 400; font-stretch: 100%; text-transform: none; letter-spacing: -.03em; font-weight: 300; font-size: .2em; line-height: 1.25; opacity: .8; word-spacing: 0; }
.mani__s--l { left: var(--gutter); top: 15%; }
.mani__s--r { right: var(--gutter); top: 15%; text-align: right; }
.mani__s--b { left: var(--gutter); bottom: 20%; }
/* Cierre: Morganite en blanco sobre bloque morado */
.mani__s--c { left: 50%; top: 50%; max-width: 96vw; white-space: nowrap; font-size: clamp(70px, 15vw, 300px); line-height: .88; padding: .06em .16em 0; color: #fff; background: var(--accent); }
/* Frases de refuerzo: Encode Sans Semi Expanded en inclinada, sin negrita (la familia no trae itálica propia, el navegador la inclina).
   Siempre abajo, a dos líneas, alineadas al mismo lado que la frase blanca de arriba */
.mani__g { position: absolute; bottom: 6%; white-space: nowrap; font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.055em; line-height: 1; font-size: clamp(42px, min(9.4vw, 14.5vh), 184px); color: var(--accent); text-shadow: 0 0 70px rgba(107, 0, 221, .55); opacity: 0; pointer-events: none; will-change: transform, opacity, filter; }
.mani__g--bl { left: var(--gutter); }
.mani__g--br { right: var(--gutter); text-align: right; }
@media (max-width: 760px) {
  .mani__g { white-space: normal; font-size: 10.5vw; left: var(--gutter); right: var(--gutter); }
  .mani__g br { display: none; }
}
.mani__tag { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; opacity: .35; }

/* Definición */
.def { height: 210vh; background: #f2f2f2; color: var(--ink); }
.def__pin { display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); }
/* Todo en esta escena se mide también contra la altura de pantalla, para que tarjeta, corchetes y logos quepan sin pisarse */
.def__stage { position: relative; display: grid; place-items: center; padding: clamp(92px, 13vh, 132px) var(--gutter) clamp(76px, 12vh, 130px); min-height: 0; }
/* Corchetes redondeados: cada lado es más alto que la tarjeta y la tarjeta le pisa el borde interior, formando un [ ] */
.def__wrap { position: relative; width: min(74vw, 1060px); }
.def__side { position: absolute; top: calc(clamp(22px, 4.4vh, 46px) * -1); bottom: calc(clamp(22px, 4.4vh, 46px) * -1); width: calc(clamp(56px, 9vw, 150px) + 34px); background: #d2d2d2; will-change: transform; }
.def__side--l { left: calc(clamp(56px, 9vw, 150px) * -1); border-radius: 130px 0 0 130px; }
.def__side--r { right: calc(clamp(56px, 9vw, 150px) * -1); border-radius: 0 130px 130px 0; }
.def__card { position: relative; z-index: 1; padding: clamp(16px, min(3.4vw, 3.6vh), 52px) clamp(18px, 4vw, 60px); background: #fff; border-radius: 30px; text-align: center; will-change: transform, opacity; }
.def__card .label { opacity: .5; }
.def__meta { display: flex; gap: 12px; justify-content: center; align-items: center; font-size: 14px; }
.def__meta .label { padding: 6px 12px; border: 1px solid var(--line-light); border-radius: 999px; font-family: var(--sans); font-style: normal; opacity: 1; }
.def__text { font-style: italic; font-weight: 300; font-size: clamp(16px, min(2vw, 3.2vh), 32px); line-height: 1.18; max-width: 24em; margin: clamp(10px, 2.2vh, 22px) auto clamp(8px, 1.6vh, 16px); letter-spacing: -.03em; }
.def__text em { font-style: inherit; font-weight: 600; color: var(--accent); }
.def__text b { font-weight: 600; color: var(--ink); }
.def__text--2 { margin-top: -6px; font-size: clamp(15px, 1.5vw, 24px); }
.def__logos { padding: 0 0 26px; }
.def__logos > .label { display: block; padding: 0 var(--gutter) 14px; opacity: .5; }
.def__logos .marquee--logos { padding: clamp(8px, 1.8vh, 22px) 0; border: 0; }
.def__logos img { height: clamp(43px, min(6.5vw, 10.2vh), 101px); margin-inline: clamp(28px, 4vw, 64px); opacity: 1; }
@media (max-width: 760px) { .def__side { display: none; } .def__wrap { width: 100%; } .def__stage { padding: 96px var(--gutter) 16px; } }

/* Pregunta */
.ask { height: 240vh; background: #000; }
.ask__mask { position: absolute; top: 50%; left: 0; height: 84vh; aspect-ratio: 1200 / 637; transform: translate(0, -50%); background-size: cover; background-position: center; -webkit-mask: url('../img/logo.svg') center / contain no-repeat; mask: url('../img/logo.svg') center / contain no-repeat; will-change: transform; }
/* Variante con palabra: letras enormes con la foto dentro */
.ask__mask--word { height: auto; aspect-ratio: auto; -webkit-mask: none; mask: none; background: none; white-space: nowrap; left: 0; font-size: 112vh; line-height: .88; padding: .2em .04em 0; background-color: #2c2c2c; background-size: cover; background-position: 50% 30%; -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Más recorrido de scroll para que la palabra tarde en irse */
.ask--long { height: 380vh; }
/* Variante con la pieza de ajedrez que cae del cielo */
.ask--drop { height: 300vh; }
.ask--drop .scene__pin { background: #000; }
/* Luz morada que se enciende detrás de la pieza cuando toca el suelo */
.ask__glow { position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; background: radial-gradient(closest-side, rgba(107, 0, 221, .95) 0%, rgba(107, 0, 221, .5) 32%, rgba(107, 0, 221, 0) 70%); opacity: 0; transform: scale(.5); will-change: opacity, transform; pointer-events: none; }
/* La pieza cabe entera en pantalla: su tamaño se limita por ancho y por alto */
.ask__drop { --w: min(97vw, 138vh); position: absolute; left: 50%; top: 50%; width: var(--w); max-width: none; margin-left: calc(var(--w) / -2); margin-top: calc(var(--w) / 1.6250 / -2); transform: translateY(-160vh); will-change: transform; }
/* Palabra gigante en contorno blanco, detrás de la pieza que cae */
.ask__word { position: absolute; top: 50%; left: 0; white-space: nowrap; font-size: 112vh; line-height: .88; padding: .2em .04em 0; color: transparent; -webkit-text-stroke: 2px #fff; transform: translate(100vw, -50%); will-change: transform, opacity; pointer-events: none; }
.ask__veil { position: absolute; inset: 0; background: #000; opacity: 0; will-change: opacity; }
.ask__q { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 var(--gutter); color: var(--bone); }
.ask__q p { font-weight: 300; font-size: clamp(30px, 5vw, 84px); line-height: 1.08; letter-spacing: -.04em; max-width: 13em; text-shadow: 0 2px 26px rgba(0, 0, 0, .65); }
.ask__q em { font-style: normal; font-weight: 600; }
.ask__q small { display: block; margin-top: 1.6em; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-shadow: none; }

/* ---------- Casos ---------- */
.cases { position: relative; background: #000; }
.cases__intro { height: 100svh; display: grid; place-items: center; text-align: center; padding: 0 var(--gutter); }
.cases__intro .big-serif { margin: 18px 0 26px; }
.cases__down { display: inline-block; opacity: .5; }
.cases__down::after { content: ''; display: block; width: 1px; height: 46px; margin: 12px auto 0; background: currentColor; animation: drip 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.case { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--tint, #101010); color: var(--bone); display: block; }
/* Difuminado morado de fondo: va por debajo del texto y las imágenes del caso que entra, nace en el borde inferior de la pantalla y sube con él */
.case__glow { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; opacity: 0; will-change: opacity, height; background: linear-gradient(0deg, rgba(107, 0, 221, .9) 0%, rgba(107, 0, 221, .4) 35%, rgba(107, 0, 221, 0) 100%); }
.case__in { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(260px, 30%) 1fr; gap: clamp(20px, 4vw, 70px); align-items: center; padding: 110px calc(var(--gutter) + 46px) 60px var(--gutter); will-change: opacity, transform; }
.case__bar { position: absolute; left: var(--gutter); right: calc(var(--gutter) + 46px); top: 96px; display: flex; justify-content: space-between; opacity: .6; }
.case__bar b { font-weight: 700; }
.case__tags { display: inline-block; margin-bottom: 14px; padding: 7px 10px; background: var(--accent); color: #fff; }
.case__disc { opacity: .6; line-height: 1.6; }
.case__name { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(72px, 9vw, 168px); line-height: .88; letter-spacing: .018em; margin: 18px 0 16px; }
.case__desc { font-weight: 300; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.35; max-width: 30ch; opacity: .86; }
.case__cta { display: inline-flex; align-items: center; gap: 16px; margin-top: 28px; }
.case__cta i { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; transition: background .4s, color .4s, border-color .4s, transform .5s var(--ease); }
.case:hover .case__cta i { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(8px); }
/* La portada se ve entera: la caja no recorta y la imagen se ajusta dentro sin cortar nada */
.case__media { position: relative; height: min(64svh, 46vw); display: flex; align-items: center; justify-content: center; }
.case__media img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 40px 90px -40px #000; will-change: transform; transition: filter .6s; }
.case__num { position: absolute; right: calc(var(--gutter) + 20px); bottom: -0.16em; font-size: clamp(160px, 30vw, 520px); line-height: .88; color: rgba(255,255,255,.07); pointer-events: none; will-change: transform; }
.cases__nav { position: fixed; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 40; display: grid; gap: 14px; opacity: 0; pointer-events: none; transition: opacity .4s; color: #fff; mix-blend-mode: difference; }
.cases__nav.is-on { opacity: 1; pointer-events: auto; }
.cases__nav a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; opacity: .4; transition: opacity .3s; }
.cases__nav a.is-on { opacity: 1; }
@media (max-width: 860px) {
  .case__in { grid-template-columns: 1fr; align-content: center; padding: 120px var(--gutter) 40px; gap: 22px; }
  .case__media { order: -1; height: 36svh; }
  .case__bar { right: var(--gutter); }
  .cases__nav { display: none; }
  .case__cta { margin-top: 16px; }
}

/* ---------- Muro ---------- */
.wall { position: relative; overflow: hidden; background: #050505; padding: clamp(90px, 10vw, 150px) 0 clamp(60px, 7vw, 110px); }
.wall__head { position: relative; padding: 0 var(--gutter); margin-bottom: clamp(50px, 7vw, 110px); }
.wall__head .big-serif { margin-top: 14px; font-size: clamp(24px, 2.9vw, 48px); }
.wall .marquee { position: relative; }
.wall .marquee__track > span { font-family: var(--display); font-stretch: 62%; font-weight: 700; text-transform: uppercase; font-size: clamp(76px, 12vw, 210px); line-height: .88; padding: .2em .28em .04em; }
.wall .marquee__track > span::after { content: '·'; margin-left: .56em; opacity: .4; }
.wall .marquee:nth-of-type(2) .marquee__track { animation-direction: reverse; }
.wall__foot { position: relative; margin-top: clamp(50px, 7vw, 110px); padding: 0 var(--gutter); text-align: center; font-weight: 300; letter-spacing: -.035em; font-size: clamp(24px, 3.2vw, 52px); }
.wall__foot em { font-style: normal; font-weight: 600; background: var(--accent); color: #fff; padding: 0 .18em; }

/* ---------- Territorios ---------- */
.terr { background: #050505; padding: clamp(90px, 10vw, 150px) var(--gutter); }
.terr__head { margin-bottom: clamp(40px, 5vw, 80px); }
.terr__head .big-serif { margin: 14px 0 18px; font-size: clamp(26px, 3.4vw, 56px); }
.terr__hint { font-weight: 300; opacity: .6; }
.terr__row { cursor: default; }
.terr__row:last-child { }
.terr__top { display: grid; grid-template-columns: 70px 1fr; align-items: center; padding: clamp(20px, 2.6vw, 38px) 0; }
.terr__n::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--accent); }
.terr__top > span:last-child { position: relative; display: block; --col: 70px; }
.terr__name { display: inline-block; font-size: clamp(72px, 12vw, 220px); line-height: .88; transition: opacity .45s; }
/* Fila activa: el nombre se convierte en marquesina (blanco relleno / contorno blanco) de izquierda a derecha */
.terr__mq { position: absolute; top: 0; left: calc(-1 * var(--col) - var(--gutter)); right: calc(-1 * var(--gutter)); margin-top: -.18em; padding: .18em 0 .14em; overflow: hidden; font-size: clamp(72px, 12vw, 220px); line-height: .88; opacity: 0; pointer-events: none; transition: opacity .45s; }
.terr__mq-track { display: flex; width: max-content; animation: terr-mq var(--d, 30s) linear infinite; animation-play-state: paused; will-change: transform; }
.terr__mq-track span { position: relative; isolation: isolate; flex: none; padding-right: .42em; white-space: nowrap; }
.terr__mq-track .o { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.terr__mq-track .f::after { content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1; color: transparent; -webkit-text-stroke: 1.5px var(--accent); transform: translate(.05em, .055em); }
@keyframes terr-mq { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes terr-tags { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.terr__row:hover .terr__name, .terr__row.is-open .terr__name { opacity: 0; }
.terr__row:hover .terr__mq, .terr__row.is-open .terr__mq { opacity: 1; }
.terr__row:hover .terr__mq-track, .terr__row.is-open .terr__mq-track, .terr__row:hover .terr__tags-track, .terr__row.is-open .terr__tags-track { animation-play-state: running; }
/* Las demás filas se oscurecen */
.terr__row { transition: opacity .45s; }
.terr:has(.terr__row:hover, .terr__row.is-open) .terr__row:not(:hover):not(.is-open) .terr__top { opacity: .22; }
.terr__top { transition: opacity .45s; }
/* Etiquetas en una sola línea, despacio y en sentido contrario */
.terr__tags { grid-column: 2 / -1; overflow: hidden; padding-bottom: 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 92%, transparent); }
.terr__tags-track { display: flex; width: max-content; animation: terr-tags var(--d, 80s) linear infinite; animation-play-state: paused; will-change: transform; }
.terr__tags-track span { flex: none; white-space: nowrap; }
.terr__tags-track span::after { content: '·'; margin: 0 2.2em; opacity: .5; }
.terr__more ul { display: none !important; }
.terr__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.terr__row:hover .terr__more, .terr__row.is-open .terr__more { grid-template-rows: 1fr; }
.terr__more > div { overflow: hidden; display: grid; grid-template-columns: 70px 1.2fr 1fr; gap: 0 24px; }
.terr__more p { grid-column: 2 / -1; font-weight: 300; letter-spacing: -.03em; font-size: clamp(18px, 1.7vw, 26px); line-height: 1.22; max-width: 26ch; padding-bottom: 34px; }
.terr__more ul { display: grid; gap: 8px; align-content: start; opacity: .6; padding-bottom: 34px; }
@media (max-width: 760px) { .terr__top { grid-template-columns: 44px 1fr; } .terr__top > span:last-child { --col: 44px; } .terr__more > div { grid-template-columns: 44px 1fr; } .terr__more ul { grid-column: 2; } }

/* ---------- Recorrido ---------- */
.path { background: var(--bone); color: var(--ink); padding: clamp(90px, 10vw, 150px) var(--gutter); }
.path__head { text-align: center; margin-bottom: clamp(40px, 6vw, 90px); }
.path__head .big-serif { margin-top: 14px; }

/* ---------- CTA ---------- */
.cta { position: relative; min-height: 88vh; overflow: hidden; background: var(--bone); color: var(--ink); display: grid; grid-template-columns: 1fr; align-content: center; justify-items: start; gap: 44px; padding: 120px var(--gutter) 90px; }
/* El sillón va a la derecha; su fondo blanco se funde con el de la sección */
.cta__photo { position: absolute; right: var(--gutter); top: 8%; bottom: 8%; width: 50%; }
.cta__photo img { width: 100%; height: 100%; object-fit: contain; object-position: 100% 50%; mix-blend-mode: multiply; }
/* Sobre la foto morada, la palabra destacada va en blanco para que no se pierda */

.cta__text { position: relative; }
.cta__text .big-serif { margin-top: 16px; max-width: 9em; }

.cta__go { position: relative; display: inline-flex; align-items: center; gap: 18px; }
.cta__go i { display: grid; place-items: center; width: clamp(64px, 6vw, 92px); aspect-ratio: 1; border-radius: 50%; background: var(--bone); color: var(--ink); font-style: normal; font-size: 22px; transition: transform .6s var(--ease), background .4s; }
.cta__go:hover i { transform: rotate(45deg) scale(1.1); background: var(--accent); color: #fff; }
@media (max-width: 760px) { .cta { min-height: 0; padding-top: 70px; } .cta__photo { position: relative; right: auto; top: auto; bottom: auto; width: 100%; } }

/* ---------- Pie que se descubre ---------- */
main { position: relative; z-index: 2; background: #050505; }
.foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; background: var(--bone); color: var(--ink); padding: clamp(70px, 8vw, 120px) var(--gutter) 24px; }
.foot.is-static { position: relative; }
.foot__top { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.foot__top .big-serif { margin: 14px 0 24px; font-size: clamp(28px, 3.6vw, 60px); }
.foot__mail { display: inline-block; font-weight: 300; letter-spacing: -.03em; font-size: clamp(20px, 2.4vw, 38px); border-bottom: 1px solid currentColor; padding-bottom: 4px; transition: color .3s; }
.foot__mail:hover { color: var(--accent); }
.foot__side { display: grid; gap: 10px; justify-items: end; text-align: right; }
.foot__side svg { width: clamp(60px, 7vw, 110px); color: var(--accent); animation: spin 14s linear infinite; margin-bottom: 12px; }
.foot__side .label:first-of-type { opacity: .5; }
.foot__tel { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 3.6vw, 56px); line-height: .88; letter-spacing: .03em; word-spacing: .08em; }
.foot__side a:hover { color: var(--accent); }
.foot__word { display: block; margin: clamp(30px, 5vw, 70px) 0 clamp(20px, 3vw, 40px); }
.foot__row { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; padding-top: 18px; }
.foot__row div { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot__row a:hover { color: var(--accent); }
.foot__row span { opacity: .5; }
@media (max-width: 760px) { .foot__top { grid-template-columns: 1fr; } .foot__side { justify-items: start; text-align: left; } }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .foot__side svg, .cases__down::after { animation: none; }
}

/* En páginas sin pie fijo (about) el main no necesita fondo propio */
.no-preloader main { background: none; }

/* ---------- Logo (máscara: toma el color del texto) ---------- */
.logo { display: block; aspect-ratio: 1200 / 637; background: currentColor; -webkit-mask: url('../img/logo.svg') center / contain no-repeat; mask: url('../img/logo.svg') center / contain no-repeat; }
.header__brand .logo { width: clamp(84px, 7vw, 116px); }
.def__word .logo { width: min(40vw, 420px, 38vh); }
.def__word { position: relative; display: inline-flex; justify-content: center; margin: clamp(8px, 1.8vh, 18px) 0 clamp(8px, 1.6vh, 16px); }
/* El asterisco del fondo, en pequeño y girando, como superíndice del logo */
.def__star { position: absolute; left: 100%; top: -6%; width: clamp(26px, 3.4vw, 54px); margin-left: 6px; animation: spin 9s linear infinite; }
.foot__word.logo { width: min(70%, 820px); margin-inline: auto; }

/* ---------- Morado sobre negro no se lee como texto: lo destacado va en blanco sobre bloque morado ---------- */
.hl, .accent, .about-hero__title em, .contact__title em, .ask__q em, .terr__head .big-serif em, .cta__text .big-serif em, .anchor .big-serif em {
  color: #fff; background: var(--accent); padding: 0 .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.section--bone .accent, .section--bone .display em, .path .big-serif em, .foot .big-serif em, .reel em { color: var(--accent); background: none; padding: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.reel em { font-family: inherit; font-weight: inherit; font-size: 1em; text-transform: inherit; letter-spacing: inherit; word-spacing: inherit; }

/* Sobre la foto morada del contacto, la palabra destacada va en blanco para que no se pierda */
.cta .cta__go i { background: var(--ink); color: #fff; }

/* ---------- Fondo Silk: aparece poco a poco desde "El método" hasta el final de la pieza de ajedrez ---------- */
.silk-zone { position: relative; background: #000; }
/* El contenedor ocupa toda la zona y el lienzo se queda fijo dentro de él: así nunca se sale por debajo */
.silk { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; will-change: opacity; }
.silk__pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.silk canvas { display: block; width: 100%; height: 100%; }
.silk-zone > section { position: relative; z-index: 1; background: transparent; }
.silk-zone .ask--drop .scene__pin { background: transparent; }
/* La escena de la pieza termina en cuanto la pieza sale: sin tramo vacío después */
.silk-zone .ask--drop { height: 250vh; }
.on-color .header { mix-blend-mode: normal; color: #fff; }

/* ---------- Webs recientes: pestaña fija a la derecha y carrusel vertical ---------- */
.webs { position: fixed; top: 0; right: 0; bottom: 0; z-index: 52; width: min(84vw, 300px); transform: translateX(100%); transition: transform .8s var(--ease); pointer-events: none; }
.webs.is-open { transform: none; }
.webs__tab { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 2px; padding: 12px 14px 12px 20px; background: var(--accent); color: #fff; border: 0; outline: 0; border-radius: 999px 0 0 999px; pointer-events: auto; cursor: pointer; transition: background .35s, color .35s, opacity .35s, padding .35s var(--ease); }
.webs__tab:hover { background: #000; color: #fff; padding-right: 20px; }
/* Con el panel abierto la pestaña desaparece; vuelve al cerrar. El panel pasa por encima del botón de menú para que no se solape con la ✕ */
.webs.is-open .webs__tab { opacity: 0; pointer-events: none; }
.webs.is-open { z-index: 70; }
/* En los casos, los puntos de navegación ocupan ese mismo sitio: la pestaña se aparta */
body:has(.cases__nav.is-on) .webs:not(.is-open) .webs__tab { opacity: 0; pointer-events: none; }
.webs__tab-n { font-size: 38px; line-height: .88; padding-top: .14em; }
.webs__tab-l { font-size: 8px; letter-spacing: .12em; white-space: nowrap; }
.webs__panel { height: 100%; display: grid; grid-template-rows: auto 1fr; background: #0a0a0a; color: #fff; border-left: 1px solid var(--line-dark); pointer-events: auto; }
.webs__head { position: relative; padding: 96px 20px 18px; }
.webs__head p { margin-top: 12px; font-weight: 300; font-size: 14px; line-height: 1.3; opacity: .75; }
.webs__x { position: absolute; right: 16px; top: 30px; width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%; color: #fff; cursor: pointer; transition: background .3s, border-color .3s; }
.webs__x:hover { background: var(--accent); border-color: var(--accent); }
.webs__list { overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); }
.webs__track { display: grid; animation: webs-roll 38s linear infinite; animation-play-state: paused; }
.webs.is-open .webs__track { animation-play-state: running; }
.webs.is-open .webs__list:hover .webs__track { animation-play-state: paused; }
@keyframes webs-roll { to { transform: translateY(-50%); } }
.webs__card { display: block; padding: 0 20px 22px; color: #fff; }
.webs__shot { display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 10; background: #151515; }
.webs__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.webs__card:hover .webs__shot img { transform: scale(1.06); }
.webs__meta { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; margin-top: 10px; }
.webs__meta b { font-family: var(--serif); font-weight: 400; font-size: 15px; letter-spacing: -.02em; }
.webs__meta .label { grid-column: 1; font-size: 9px; opacity: .55; }
.webs__meta i { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; font-size: 13px; transition: background .3s, border-color .3s, transform .5s var(--ease); }
.webs__card:hover .webs__meta i { background: var(--accent); border-color: var(--accent); transform: rotate(45deg); }
.menu-open .webs { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .webs__track { animation: none; } .webs__list { overflow-y: auto; } }

/* En móvil la pestaña de webs es más pequeña y baja, para no tapar los textos del centro */
@media (max-width: 760px) {
  .webs__tab { top: auto; bottom: 116px; transform: none; padding: 9px 10px 8px 15px; }
  .webs__tab-n { font-size: 26px; }
  .webs__tab-l { display: none; }
}

/* Manifiesto en móvil: las frases blancas siempre en dos líneas y las moradas separadas de «Manifiesto» */
.br-m { display: none; }
@media (max-width: 760px) {
  .br-m { display: inline; }
  .mani__s:not(.mani__s--c) { font-size: 12.2vw; max-width: none; right: var(--gutter); }
  .mani__s--r { left: var(--gutter); }
  .mani__g { bottom: 15%; }
  /* La palabra MORAO con la foto dura más en pantalla */
  .ask:not(.ask--long):not(.ask--drop) { height: 420vh; }
}