/* Azu — Portafolio 2026 · Ctrl Z */
@import url('fonts.css');

:root {
  --vino: #800000;
  --tinta: #111111;
  --negro: #000000;
  --gris: #d9d9d9;
  --linea: #e4e4e4;
  --papel: #f4f2ee;
  --mu-l: #686868;

  --m: clamp(16px, 4.4vw, 72px);
  --g: clamp(12px, 1.6vw, 24px);
  --hd-h: 64px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);

  --f: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f2: 'General Sans', var(--f);
  --fh: 'Delicious Handrawn', 'Marker Felt', cursive;

  --ui-fg: #fff;
  --ui-bg: #800000;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font: 400 17px/1.55 var(--f);
  color: var(--tinta);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 700; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
strong { font-weight: 700; }
kbd { font: inherit; }
::selection { background: var(--vino); color: #fff; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: #000; color: #fff; padding: 10px 14px; font-size: 14px; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- tipos */
.folio { font: 700 12px/1 var(--f); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.lead { font: 400 clamp(21px, 2.1vw, 34px)/1.24 var(--f); letter-spacing: -0.018em; }
.lead strong { font-weight: 700; }
.lead--xl { font-size: clamp(25px, 2.9vw, 46px); line-height: 1.16; letter-spacing: -0.024em; }
.label-xl { font: 400 clamp(28px, 3.8vw, 62px)/1 var(--f2); letter-spacing: .055em; text-transform: uppercase; }
.label-l { font: 400 clamp(15px, 1.3vw, 19px)/1.35 var(--f2); letter-spacing: .14em; text-transform: uppercase; }
.h2 { font: 700 clamp(42px, 6vw, 108px)/.94 var(--f); letter-spacing: -0.048em; }
.h3 { font: 700 clamp(26px, 2.4vw, 40px)/1.04 var(--f); letter-spacing: -0.032em; }
.hand { font-family: var(--fh); font-weight: 400; letter-spacing: 0; text-transform: none; }
.i { width: 1em; height: 1em; flex: none; }

.btn-line, .btn-solid {
  display: inline-flex; align-items: center; gap: .6em;
  font: 500 15px/1 var(--f); letter-spacing: -0.005em;
  padding: 14px 0; border-bottom: 1.5px solid currentColor;
  transition: gap .4s var(--ease), opacity .3s;
}
.btn-line:hover { gap: 1em; }
.btn-solid { padding: 16px 22px; border: 0; background: var(--tinta); color: #fff; }
.btn-solid:hover { gap: 1em; background: var(--vino); }
.btn-solid--light { background: #fff; color: var(--vino); }
.btn-solid--light:hover { background: #000; color: #fff; }
.btn-line--light { color: #fff; }

/* ---------------------------------------------------------------- header */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--hd-h);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--m);
  color: var(--ui-fg);
  transition: transform .5s var(--ease), color .35s, background-color .35s;
}
.hd::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ui-bg); opacity: 0; transition: opacity .35s;
}
.hd--solid::before { opacity: .94; }
@supports (backdrop-filter: blur(10px)) { .hd--solid::before { opacity: .82; } .hd--solid { backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); } }
.hd--hide { transform: translateY(-100%); }
.hd__brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.hd__brand .logo { width: 34px; height: auto; }
.hd__brand span { font: 500 12px/1 var(--f2); letter-spacing: .16em; text-transform: uppercase; }
.hd__nav { display: flex; gap: 26px; font: 500 14px/1 var(--f); }
.hd__nav a { position: relative; padding: 6px 0; }
.hd__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.hd__nav a:hover::after, .hd__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.hd__hist { display: flex; gap: 4px; }
.hd__hist kbd, .hist kbd {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px;
  font: 600 11px/1 var(--f); border: 1px solid currentColor; border-bottom-width: 3px; border-radius: 4px;
}
.hd__hist:hover kbd { background: var(--ui-fg); color: var(--ui-bg); }
.hd__menu { display: none; font: 500 14px/1 var(--f); padding: 10px 0; }

.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--vino); color: #fff;
  display: flex; flex-direction: column; justify-content: center; padding: var(--hd-h) var(--m) 32px;
}
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 4px; }
.menu nav a { display: flex; align-items: baseline; gap: 14px; font: 700 clamp(44px, 12vw, 80px)/1 var(--f); letter-spacing: -0.05em; }
.menu nav a span { font: 700 12px/1 var(--f); letter-spacing: .04em; }
.menu__ft { position: absolute; bottom: 28px; left: var(--m); font: 500 12px/1 var(--f2); letter-spacing: .16em; text-transform: uppercase; }

/* titulillo vertical, como en las páginas del libro */
.rh {
  position: fixed; left: calc(var(--m) / 2 - 7px); bottom: 22vh; z-index: 30;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 400 10px/1 var(--f); letter-spacing: .02em; text-transform: uppercase;
  color: var(--ui-fg); transition: color .35s, opacity .4s; pointer-events: none;
}
.rh strong { font-weight: 700; }

/* ---------------------------------------------------------------- intro */
.intro {
  position: fixed; inset: 0; z-index: 90; background: #fff; color: #1d1d1b;
  display: grid; place-items: center; align-content: center; gap: 18px;
}
.logo-draw { width: clamp(150px, 19vw, 260px); height: auto; }
.logo-draw__m { stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro__by { font: 500 14px/1 var(--f2); letter-spacing: .2em; text-transform: uppercase; opacity: 0; }
html:not(.js) .intro, html.visto .intro { display: none; }
body.is-intro { overflow: hidden; }
body.is-intro .hd, body.is-intro .rh { opacity: 0; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; min-height: 100svh; background: var(--vino); color: #fff;
  display: grid; grid-template-rows: auto 1fr auto; gap: 24px;
  padding: calc(var(--hd-h) + 20px) var(--m) clamp(20px, 3vw, 36px);
  overflow: hidden;
}
.hero__top { display: flex; justify-content: space-between; align-items: start; font-size: 14px; line-height: 1.4; }
.hero__ed { text-align: right; }
.hero__t {
  position: relative; align-self: center;
  font: 700 clamp(54px, 10.6vw, 200px)/.88 var(--f); letter-spacing: -0.058em;
  max-width: 12.4ch; text-wrap: wrap;
}
.hero__sizer { display: block; }
html.js .hero__sizer { visibility: hidden; }
.hero__type { position: absolute; inset: 0; display: block; }
html:not(.js) .hero__type { display: none; }
.hero__typed .sel { background: #fff; color: var(--vino); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.caret { display: inline-block; width: .055em; height: .78em; margin-left: .03em; vertical-align: -.04em; background: currentColor; animation: blink 1.05s steps(1) infinite; }
.caret.is-off { opacity: 0; animation: none; }
@keyframes blink { 50% { opacity: 0; } }
.hero__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; }
.hero__quote { font-size: 16px; line-height: 1.35; }
.hero__quote strong { font-weight: 500; }
.hero__quote em { font-weight: 300; font-style: italic; }
.hero__down { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--f); }
.hero__down .i { animation: bob 2.2s var(--ease-io) infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }

.keys { position: relative; display: flex; gap: 10px; padding-top: 34px; }
.key {
  display: grid; place-items: center; height: 62px; min-width: 62px; padding: 0 14px;
  font: 500 15px/1 var(--f); color: #f2f2f2; border-radius: 9px;
  background: linear-gradient(180deg, #3b3b3b, #1b1b1b 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -6px 0 rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.35);
  transition: transform .12s, box-shadow .12s;
}
.key:first-child { min-width: 86px; justify-items: start; align-items: start; padding-top: 12px; }
.key--z { font-size: 24px; font-weight: 600; }
.keys.is-down .key, .keys:active .key { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.3); }
.keys__hand { position: absolute; top: -4px; left: -10px; font-size: 24px; transform: rotate(-7deg); white-space: nowrap; }
.keys__hand::after { content: '↘'; font-family: var(--f); font-size: 15px; margin-left: 4px; display: inline-block; transform: rotate(8deg); }

/* ---------------------------------------------------------------- porta */
.porta { position: relative; height: 180vh; background: #000; color: #fff; }
.porta__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.porta__t { font: 400 clamp(13px, 1.25vw, 19px)/1 var(--f2); letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; will-change: transform; }

/* ---------------------------------------------------------------- ctrl z, para mí */
.ctrlz { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.ctrlz__text { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); padding: clamp(110px, 12vw, 180px) var(--m) clamp(56px, 6vw, 88px); }
.ctrlz__text .lead { max-width: 21ch; }
.ctrlz__body { max-width: 46ch; margin-left: clamp(0px, 9vw, 150px); font-size: 16px; }
.ctrlz__body p + p, .more__in p { margin-top: 1em; }
.more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.more__in { overflow: hidden; }
.more.is-open { grid-template-rows: 1fr; }
.ctrlz__body .btn-line { margin-top: 18px; }
[data-more-btn][aria-expanded="true"] .i { transform: rotate(180deg); }
.stat--ctrlz { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 20px; border-top: 1px solid var(--tinta); padding-top: 20px; }
.stat__n { font: 700 clamp(64px, 8.6vw, 160px)/.82 var(--f); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; }
.stat--ctrlz .stat__n { color: var(--vino); }
.stat__d { font-size: 15px; line-height: 1.4; max-width: 28ch; }
.ctrlz .label-xl { margin-top: auto; }
.ctrlz__photo { position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; overflow: hidden; background: #999; }
.ctrlz__photo img { width: 100%; height: 100%; object-fit: cover; }
.band { position: absolute; top: 0; bottom: 0; left: 23%; width: clamp(56px, 6.6vw, 104px); background: var(--vino); overflow: hidden; display: flex; justify-content: center; }
.band__t {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 clamp(28px, 3.3vw, 54px)/1 var(--f); letter-spacing: -0.02em; text-transform: uppercase;
  color: #fff; white-space: nowrap; padding-block: 6vh;
}

/* ---------------------------------------------------------------- ¿y quién soy yo? */
.azu { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.azu__l { position: relative; background: var(--vino); color: #fff; display: grid; place-items: center; padding: 120px var(--m) 140px; }
.azu__l .folio { position: absolute; left: var(--m); top: 50%; }
.azu__kid { width: min(56%, 420px); aspect-ratio: 1; overflow: hidden; }
.azu__kid img { width: 100%; height: 100%; object-fit: cover; }
.azu__l .label-xl { position: absolute; left: 0; right: 0; bottom: clamp(36px, 6vw, 72px); text-align: center; }
.azu__r { background: #fff; display: grid; grid-template-columns: 1fr; justify-items: center; align-content: space-between; gap: 36px; padding: clamp(96px, 9vw, 130px) var(--m) 56px; }
.azu__nota { width: min(100%, 500px); }
.azu__nota--1 { justify-self: start; }
.azu__nota--2 { justify-self: end; }
.polaroid { position: relative; width: min(62%, 330px); aspect-ratio: .88; margin: 12px 0; }
.polaroid::before { content: ''; position: absolute; left: -2%; right: -8%; top: 10%; bottom: 14%; background: var(--vino); }
.polaroid__papel { position: absolute; inset: 0 2% 0 6%; width: 92%; height: 100%; object-fit: fill; transform: rotate(-2.5deg); filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.polaroid__foto { position: absolute; left: 18%; top: 8%; width: 62%; transform: rotate(1.5deg); filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); }
.polaroid__clip { position: absolute; right: 4%; top: -14%; width: 34%; transform: rotate(14deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.ficha { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 18px var(--g); border-top: 1px solid var(--tinta); padding-top: 18px; }
.ficha dt { font: 500 11px/1 var(--f2); letter-spacing: .14em; text-transform: uppercase; color: var(--mu-l); margin-bottom: 6px; }
.ficha dd { font-size: 15px; line-height: 1.35; font-weight: 500; }

/* ---------------------------------------------------------------- preguntas */
.qs { position: relative; background: #0b0b0b; color: #fff; }
.qs__pin { padding: 120px var(--m) 64px; }
.qs__label { font: 400 clamp(13px, 1.1vw, 16px)/1 var(--f2); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 40px; }
.qs__item { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 48px var(--m); margin: 0 calc(var(--m) * -1); background: var(--qbg); color: var(--qfg); }
.qs__n { font: 700 12px/1 var(--f); letter-spacing: .04em; }
.qs__n span { opacity: .55; }
.qs__q { font: 600 clamp(32px, 5.4vw, 96px)/1 var(--f); letter-spacing: -0.042em; max-width: 17ch; text-wrap: balance; }
.qs__p { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--f); }
.qs__img { width: min(56vw, 260px); aspect-ratio: 4 / 5; overflow: hidden; }
.qs__img img { width: 100%; height: 100%; object-fit: cover; }
.qs__bar { display: none; }
@media (min-width: 900px) {
  html.js .qs { height: calc(var(--n, 7) * 85vh + 100vh); }
  html.js .qs__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--hd-h) + 28px) var(--m) 32px; background: var(--qs-bg, #0b0b0b); color: var(--qs-fg, #fff); }
  html.js .qs__stage { position: relative; }
  html.js .qs__item { position: absolute; inset: 0; margin: 0; padding: 0; background: none; color: inherit; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; column-gap: 6vw; opacity: 0; visibility: hidden; }
  html.js .qs__n { grid-column: 1; }
  html.js .qs__q { grid-column: 1; align-self: center; }
  html.js .qs__p { grid-column: 1; }
  html.js .qs__img { grid-column: 2; grid-row: 1 / 4; align-self: center; width: clamp(220px, 22vw, 360px); }
  html.js .qs__bar { display: block; height: 2px; background: color-mix(in srgb, currentColor 22%, transparent); }
  html.js .qs__bar span { display: block; height: 100%; background: currentColor; transform-origin: left; transform: scaleX(0); }
}

/* ---------------------------------------------------------------- proceso */
.proc { background: #fff; padding: clamp(100px, 11vw, 170px) var(--m); }
.proc__head { display: grid; grid-template-columns: 1fr 3fr; gap: var(--g); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.proc__head .h2 { max-width: 15ch; }
.proc__head .hand { display: block; font-size: .36em; color: var(--vino); margin-top: .3em; letter-spacing: 0; }
.proc__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); }
.proc__item { border-top: 1px solid var(--tinta); padding-top: 16px; }
.proc__item figure { aspect-ratio: 4 / 5; overflow: hidden; background: var(--papel); margin-bottom: 18px; }
.proc__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.proc__item:hover img { transform: scale(1.04); }
.proc__n { font: 700 12px/1 var(--f); color: var(--vino); margin-bottom: 8px; }
.proc__item h3 { font: 700 clamp(22px, 2vw, 30px)/1.05 var(--f); letter-spacing: -0.03em; margin-bottom: 10px; }
.proc__item p { font-size: 15px; line-height: 1.45; }

/* ---------------------------------------------------------------- índice */
.idx { background: #fff; padding: clamp(80px, 9vw, 140px) var(--m) clamp(100px, 11vw, 170px); }
.idx__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 18px; }
.idx__word { font: 800 clamp(108px, 19vw, 340px)/.76 var(--f); letter-spacing: -0.065em; color: var(--vino); margin-left: -.04em; }
.idx__sub { text-align: right; font: 500 14px/1.4 var(--f); padding-bottom: .6em; }
.idx__list { display: grid; grid-template-columns: 1fr; }
.idx__cat-t { display: flex; justify-content: space-between; font: 900 13px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--vino); padding: 34px 0 12px; border-bottom: 1.5px solid var(--tinta); }
.idx__row { position: relative; isolation: isolate; display: grid; grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1fr) 22px; align-items: center; gap: var(--g); padding: 16px 0; border-bottom: 1px solid var(--linea); transition: color .35s, padding .5s var(--ease); }
.idx__row::before { content: ''; position: absolute; inset: 0 calc(var(--m) * -1); z-index: -1; background: var(--rbg); clip-path: inset(0 100% 0 0); transition: clip-path .55s var(--ease); }
.idx__n { font: 900 14px/1 var(--f); color: var(--vino); font-variant-numeric: tabular-nums; transition: color .35s; }
.idx__t { font: 600 clamp(22px, 2.7vw, 42px)/1.05 var(--f); letter-spacing: -0.032em; }
.idx__k { font-size: 14px; line-height: 1.3; color: var(--mu-l); transition: color .35s; }
.idx__row .i { width: 22px; height: 22px; transform: translateX(-8px); opacity: 0; transition: transform .45s var(--ease), opacity .3s; }
@media (hover: hover) {
  .idx__row:hover { color: var(--rfg); padding-left: 14px; }
  .idx__row:hover::before { clip-path: inset(0 0 0 0); }
  .idx__row:hover .idx__n, .idx__row:hover .idx__k { color: var(--rfg); }
  .idx__row:hover .i { opacity: 1; transform: none; }
}
.idx__prev { position: fixed; left: 0; top: 0; z-index: 45; width: clamp(200px, 17vw, 280px); aspect-ratio: 4 / 5; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; }
.idx__prev img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- categorías */
.cat { position: relative; background: #fff; padding-bottom: clamp(80px, 9vw, 140px); overflow: hidden; }
.muro { color: var(--gris); pointer-events: none; user-select: none; padding-top: clamp(24px, 3vw, 48px); overflow: hidden; }
.muro__r { display: flex; align-items: baseline; gap: .1em; white-space: nowrap; font: 400 clamp(84px, 16.5vw, 300px)/.8 var(--f); letter-spacing: -0.06em; will-change: transform; }
.muro__r:nth-child(2) { margin-left: -12vw; }
.muro__r:nth-child(3) { margin-left: -30vw; }
.w9 { font-weight: 900; }
.w3 { font-weight: 300; }
.muro__c { font-weight: 800; font-size: .2em; letter-spacing: -0.02em; align-self: center; }
.cat__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px var(--g); margin: clamp(-60px, -3vw, -20px) var(--m) 0; padding: 20px 0 18px; border-bottom: 1.5px solid var(--tinta); position: relative; background: #fff; }
.cat__head .folio { grid-column: 1 / -1; color: var(--vino); }
.cat__n { font: 500 14px/1 var(--f); padding-bottom: .4em; }
.reel { position: relative; }
.reel__track { display: flex; gap: var(--g); padding: 36px var(--m) 0; width: max-content; }
.card { --h: min(62vh, 620px); display: block; width: calc(var(--h) * var(--r)); flex: none; }
.card__img { height: var(--h); overflow: hidden; background: var(--cbg); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card__img img { transform: scale(1.045); }
.card__meta { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding-top: 14px; }
.card__n { font: 900 13px/1.5 var(--f); color: var(--vino); }
.card__meta h3 { font: 700 clamp(20px, 1.7vw, 26px)/1.1 var(--f); letter-spacing: -0.03em; }
.card__meta p { grid-column: 2; font-size: 15px; line-height: 1.35; color: var(--mu-l); margin-top: 4px; }

/* ---------------------------------------------------------------- lab */
.lab { background: #0b0b0b; color: #fff; padding-top: clamp(100px, 11vw, 170px); }
.lab__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px var(--g); padding: 0 var(--m) 40px; }
.lab__head .folio { grid-column: 1 / -1; }
.lab__sub { font-size: 16px; max-width: 30ch; text-align: right; }
.xfield { position: relative; height: 88vh; height: 88svh; min-height: 520px; background: #300755; overflow: hidden; cursor: crosshair; touch-action: pan-y; }
.xfield__img { position: absolute; left: 0; top: 0; width: clamp(110px, 13vw, 210px); aspect-ratio: 1; object-fit: cover; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.xfield__c { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 22px; text-align: center; pointer-events: none; padding: 0 var(--m); }
.xfield__c a { pointer-events: auto; }
.xfield__t { font: 700 clamp(48px, 7.4vw, 132px)/.9 var(--f); letter-spacing: -0.055em; text-shadow: 0 2px 30px rgba(48, 7, 85, .6); }
.xfield__hint { font: 400 26px/1 var(--fh); color: #ff70c0; }
.hint-touch { display: none; }
@media (hover: none) { .hint-fine { display: none; } .hint-touch { display: inline; } }
.xfield__n { position: absolute; z-index: 3; right: var(--m); bottom: 24px; font: 700 12px/1 var(--f); letter-spacing: .04em; }

.memo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(32px, 6vw, 100px); align-items: center; padding: clamp(90px, 10vw, 150px) var(--m); background: var(--papel); color: #1f3c8f; }
.memo__info { display: grid; gap: 18px; max-width: 420px; }
.memo__info > p { font-size: 16px; }
.memo__score { display: flex; gap: 40px; border-top: 1px solid currentColor; padding-top: 14px; }
.memo__score dt { font: 500 11px/1 var(--f2); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.memo__score dd { font: 700 34px/1 var(--f); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.memo__acts { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.memo__last { min-height: 1.5em; font-size: 15px; color: #db5e3d; font-weight: 500; }
.memo__board { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); width: 100%; max-width: 680px; justify-self: end; }
.mcard { position: relative; aspect-ratio: 414 / 532; perspective: 1000px; border-radius: 8px; }
.mcard:focus-visible { outline: 2px solid #1f3c8f; outline-offset: 3px; }
.mcard__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .62s var(--ease); }
.mcard.is-up .mcard__in { transform: rotateY(180deg); }
.mcard__b, .mcard__f { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 10px 22px rgba(31,60,143,.1); }
.mcard__b { background: repeating-linear-gradient(90deg, #7ccdb5 0 9%, #f6f1e6 9% 18%); display: grid; place-items: center; }
.mcard__b::after { content: ''; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #f6f1e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 21a1.6 1.6 0 1 1 2-2.3 4 4 0 1 1-5.6 4.4 6.4 6.4 0 1 1 10.4-6.2 8.8 8.8 0 1 1-15.6 7.5' fill='none' stroke='%237ccdb5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 62% no-repeat; }
.mcard__f { transform: rotateY(180deg); background: #fff; }
.mcard__f img { width: 100%; height: 100%; object-fit: cover; }
.mcard.is-ok .mcard__f { box-shadow: 0 0 0 2px #7ccdb5, 0 10px 22px rgba(31,60,143,.1); }
.memo__win { position: absolute; inset: -8px; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; background: rgba(244, 242, 238, .94); padding: 24px; }
.memo__win[hidden] { display: none; }
.memo__win-t { font: 700 clamp(30px, 3.4vw, 52px)/1 var(--f); letter-spacing: -0.04em; }

/* ---------------------------------------------------------------- cv: mesa de trabajo */
.cv { --cnv: #dcdad5; --ui: #2b2b2b; --ui2: #1e1e1e; --uil: #bdbdbd; --sel: #2f6bff; background: #fff; padding: clamp(100px, 11vw, 170px) var(--m) clamp(80px, 9vw, 140px); }
.cv__top { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(28px, 3vw, 44px); }
.cv__t { font: 800 clamp(72px, 12.5vw, 230px)/.78 var(--f); letter-spacing: -0.065em; color: var(--vino); margin-left: -.04em; }
.cv__hint { text-align: right; font-size: 14px; line-height: 1.5; color: var(--mu-l); }
.cv__hint .hand { font-size: 26px; color: var(--vino); }
.cv__hint kbd { font: 600 10px/1 var(--f); border: 1px solid currentColor; border-bottom-width: 2px; border-radius: 3px; padding: 2px 5px; }
.ws { background: var(--ui2); color: var(--uil); border: 1px solid #0d0d0d; box-shadow: 0 40px 90px rgba(0,0,0,.22); font: 400 12px/1.3 var(--f); }
.ws__tabs { display: flex; gap: 1px; background: #141414; overflow: hidden; }
.ws__tabs span { padding: 9px 16px; background: #232323; white-space: nowrap; color: #8a8a8a; }
.ws__tabs span.is-on { background: var(--ui); color: #e8e8e8; }
.ws__body { display: grid; grid-template-columns: 44px minmax(0, 1fr) 248px; min-height: 600px; }
.ws__tools { background: var(--ui); border-right: 1px solid #111; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ws__tools li { width: 32px; height: 32px; display: grid; place-items: center; color: #c9c9c9; border-radius: 4px; }
.ws__tools li.is-on, .ws__tools li:hover { background: #474747; color: #fff; }
.ws__tools svg { width: 18px; height: 18px; }
.ws__fill { position: relative; margin-top: 10px; }
.ws__fill span { position: absolute; width: 16px; height: 16px; border: 1px solid #000; }
.ws__fill span:first-child { left: 4px; top: 4px; background: var(--vino); z-index: 1; }
.ws__fill span:last-child { left: 12px; top: 12px; background: #fff; }
.ws__canvas { position: relative; background: var(--cnv) radial-gradient(circle, rgba(0,0,0,.09) 1px, transparent 1.2px) 0 0 / 22px 22px; padding: 54px clamp(20px, 4vw, 64px) 64px 48px; overflow: hidden; }
.ws__ruler { position: absolute; display: flex; background: #e9e8e5; color: #7a7a7a; font-size: 8px; overflow: hidden; pointer-events: none; }
.ws__ruler span { flex: none; position: relative; }
.ws__ruler--x { left: 22px; right: 0; top: 0; height: 22px; border-bottom: 1px solid #b9b8b4; }
.ws__ruler--x span { width: 64px; padding: 2px 0 0 3px; border-left: 1px solid #9c9b97; background: repeating-linear-gradient(90deg, transparent 0 7px, #b9b8b4 7px 8px) bottom / 100% 5px no-repeat; }
.ws__ruler--y { left: 0; top: 22px; bottom: 0; width: 22px; flex-direction: column; border-right: 1px solid #b9b8b4; }
.ws__ruler--y span { height: 64px; writing-mode: vertical-rl; transform: rotate(180deg); padding: 3px 2px 0 0; border-bottom: 1px solid #9c9b97; background: repeating-linear-gradient(0deg, transparent 0 7px, #b9b8b4 7px 8px) right / 5px 100% no-repeat; }
.ws__ruler--x::before { content: ''; position: absolute; left: -22px; top: 0; width: 22px; height: 22px; background: #e9e8e5; border-right: 1px solid #b9b8b4; }
.ab__name { position: relative; margin: 0 0 6px; font-size: 11px; color: #5d5d5a; }
.ab { position: relative; background: #fff; color: var(--tinta); padding: clamp(28px, 4vw, 64px); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 18px 40px rgba(0,0,0,.12); font: 400 15px/1.5 var(--f); }
.ab__guide { position: absolute; background: rgba(0, 220, 255, .65); pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s; }
.ab__guide--v { top: -54px; bottom: -64px; left: clamp(28px, 4vw, 64px); width: 1px; }
.ab__guide--h { left: -48px; right: -64px; top: clamp(28px, 4vw, 64px); height: 1px; }
.ws.is-guides .ab__guide { opacity: 1; }
.ab__l { position: relative; transition: opacity .35s, filter .35s; cursor: default; }
.ab__l.is-off { opacity: 0; visibility: hidden; }
.ab__l + .ab__l, .ab__grid + .ab__l, .ab__l + .ab__grid { margin-top: clamp(28px, 3.4vw, 48px); }
.ab__id { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2.4vw, 36px); padding-bottom: clamp(22px, 2.6vw, 36px); border-bottom: 1.5px solid var(--tinta); }
.ab__stamp { width: clamp(84px, 9vw, 140px); transform: rotate(-6deg); filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
.ab__name-t { font: 800 clamp(38px, 5.4vw, 92px)/.88 var(--f); letter-spacing: -0.055em; color: var(--vino); }
.ab__role { margin-top: 10px; font-size: 15px; color: var(--mu-l); }
.ab__role span { margin: 0 4px; }
.ab__contact { text-align: right; font-size: 13px; line-height: 1.6; }
.ab__contact a:hover { color: var(--vino); }
.ab__k { font: 700 11px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--vino); padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--tinta); }
.ab__k span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mu-l); margin-left: 10px; }
.ab__k--2 { margin-top: 22px; }
.ab__perfil-t { font-size: clamp(19px, 1.9vw, 30px); line-height: 1.28; letter-spacing: -0.018em; max-width: 34ch; }
.ab__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 3vw, 48px); }
.ab__grid--b { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ab__f { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.ab__f:first-of-type { padding-top: 0; }
.ab__f:last-child { border-bottom: 0; }
.ab__f span { font-weight: 700; font-size: 13px; white-space: nowrap; }
.ab__cl { display: grid; gap: 10px; }
.ab__card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; background: color-mix(in srgb, var(--pc) 9%, #fff); border-left: 4px solid var(--pc); transition: transform .45s var(--ease), background .3s; }
.ab__card:hover { transform: translateX(6px); background: color-mix(in srgb, var(--pc) 16%, #fff); }
.ab__card figure { width: 64px; height: 64px; display: grid; place-items: center; }
.ab__card img { max-width: 100%; max-height: 64px; width: auto; object-fit: contain; transition: transform .5s var(--ease); }
.ab__card:hover img { transform: rotate(-8deg) scale(1.08); }
.ab__card p { font-size: 13px; line-height: 1.4; }
.ab__card strong { display: block; font-size: 15px; margin-bottom: 2px; }
.mx__wrap { overflow-x: auto; scrollbar-width: thin; }
.mx { min-width: 640px; font-size: 13px; }
.mx__h, .mx__r { display: grid; grid-template-columns: minmax(150px, 1.6fr) repeat(var(--n), minmax(22px, 1fr)) 28px; align-items: center; }
.mx__h { align-items: end; height: 150px; }
.mx__p { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; padding-bottom: 8px; }
.mx__p b { writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); font-weight: 500; font-size: 12px; white-space: nowrap; color: var(--mu-l); transition: color .25s; }
.mx__p i { font: 700 10px/1 var(--f); font-style: normal; color: var(--pc); filter: brightness(.8); }
.mx__p::after { content: ''; width: 10px; height: 4px; background: var(--pc); }
.mx__r { border-top: 1px solid var(--linea); min-height: 34px; }
.mx__d { font-weight: 500; padding-right: 12px; }
.mx__c { display: grid; place-items: center; height: 34px; transition: background .25s; }
.mx__c i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 1px rgba(0,0,0,.08); transition: scale .35s var(--ease); }
a.mx__c:hover i { scale: 1.6; }
.mx__n { text-align: right; font: 700 12px/1 var(--f); color: var(--vino); font-variant-numeric: tabular-nums; }
.mx.is-hl .mx__c, .mx.is-hl .mx__p b { opacity: .25; }
.mx.is-hl .mx__c.is-hl, .mx.is-hl .mx__p.is-hl b { opacity: 1; color: var(--tinta); }
.mx .mx__c.is-hl { background: rgba(0,0,0,.035); }
.ab__keys { display: flex; flex-wrap: wrap; gap: 10px; }
.kc { display: inline-grid; place-items: center; min-height: 48px; padding: 0 16px; font: 500 14px/1 var(--f); color: var(--tinta); border-radius: 8px; background: linear-gradient(180deg, #fbfaf8, #ecebe7); box-shadow: inset 0 1px 0 #fff, inset 0 -4px 0 #cfccc6, 0 6px 14px rgba(0,0,0,.08); cursor: pointer; user-select: none; transition: translate .12s, box-shadow .12s; }
.kc:hover { color: var(--vino); }
.kc:active, .kc.is-down { translate: 0 3px; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #cfccc6, 0 2px 4px rgba(0,0,0,.08); }
.sel { position: absolute; left: 0; top: 0; width: 0; height: 0; border: 1px solid var(--sel); pointer-events: none; z-index: 3; opacity: 0; }
.sel i { position: absolute; width: 8px; height: 8px; background: #fff; border: 1px solid var(--sel); }
.sel i:nth-child(1) { left: -4px; top: -4px; } .sel i:nth-child(2) { left: calc(50% - 4px); top: -4px; } .sel i:nth-child(3) { right: -4px; top: -4px; }
.sel i:nth-child(4) { right: -4px; top: calc(50% - 4px); } .sel i:nth-child(5) { right: -4px; bottom: -4px; } .sel i:nth-child(6) { left: calc(50% - 4px); bottom: -4px; }
.sel i:nth-child(7) { left: -4px; bottom: -4px; } .sel i:nth-child(8) { left: -4px; top: calc(50% - 4px); }
.sel__tag { position: absolute; left: -1px; top: -24px; padding: 4px 7px; background: var(--sel); color: #fff; font: 500 11px/1 var(--f); white-space: nowrap; }
.ws__panels { background: var(--ui); border-left: 1px solid #111; display: flex; flex-direction: column; }
.pn { border-bottom: 1px solid #141414; }
.pn__hd { display: flex; justify-content: space-between; padding: 9px 12px; background: #232323; color: #e8e8e8; font-weight: 600; }
.pn__hd span { color: #8a8a8a; font-weight: 400; }
.pn__layers li { display: flex; align-items: stretch; border-bottom: 1px solid #1f1f1f; }
.pn__layers li.is-sel { background: #3d4a66; }
.pn__eye { width: 34px; display: grid; place-items: center; color: #d0d0d0; border-right: 1px solid #1f1f1f; }
.pn__eye svg { width: 16px; height: 16px; }
.pn__eye .eye-x { opacity: 0; }
.pn__eye[aria-pressed="false"] { color: #6c6c6c; }
.pn__eye[aria-pressed="false"] .eye-x { opacity: 1; }
.pn__eye[aria-pressed="false"] .eye-o { opacity: .45; }
.pn__name { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 10px; text-align: left; color: #d6d6d6; }
.pn__name:hover { background: rgba(255,255,255,.05); }
.pn__thumb { width: 22px; height: 16px; background: #fff; border: 1px solid #555; flex: none; }
.pn__layers li.is-off .pn__name { color: #777; font-style: italic; }
.pn__sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px; }
.pn__sw button { aspect-ratio: 1; padding: 2px; border: 1px solid #555; }
.pn__sw button span { display: block; width: 100%; height: 100%; background: var(--sw); }
.pn__sw button:hover { border-color: #fff; }
.pn--acts { margin-top: auto; padding: 14px 12px 16px; display: grid; gap: 4px; border: 0; }
.pn--acts .btn-solid { justify-content: center; background: var(--vino); }
.pn--acts .btn-solid:hover { background: #a10000; }
.pn--acts .btn-line { color: #e8e8e8; justify-content: center; }
.ws__status { display: flex; gap: 22px; padding: 7px 12px; background: #1a1a1a; color: #8a8a8a; font-size: 11px; border-top: 1px solid #0d0d0d; }
.ws__status span:last-child { margin-left: auto; color: #cfcfcf; }

/* ---------------------------------------------------------------- carta */
.carta { background: var(--vino); color: #fff; padding: clamp(100px, 11vw, 170px) var(--m) clamp(90px, 10vw, 150px); display: grid; justify-items: center; gap: clamp(40px, 5vw, 72px); }
.carta__head { width: 100%; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.hoja { position: relative; width: min(100%, 780px); background: #fffdf8; color: #161616; padding: clamp(48px, 7vw, 96px) clamp(22px, 7vw, 104px) clamp(40px, 6vw, 80px); box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 40px 80px rgba(40, 0, 0, .35); font-size: 17px; line-height: 1.64; }
.hoja p + p { margin-top: 1.05em; }
.hoja__clip { position: absolute; top: -50px; left: 50%; width: clamp(88px, 10vw, 120px); transform: translateX(-50%) rotate(-3deg); filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.hoja__fecha { font-size: 14px; color: var(--mu-l); text-align: right; margin-bottom: 2.2em; }
.hoja__saludo { font-weight: 600; }
.hoja__desp { margin-top: 2em !important; }
.hoja__firma { display: flex; align-items: center; gap: 14px; margin-top: .2em !important; color: var(--vino); }
.hoja__firma .hand { font-size: clamp(52px, 6vw, 72px); line-height: 1; }
.hoja__firma .logo { width: 54px; color: var(--vino); }
.hoja__nom { font-size: 14px; line-height: 1.45; }
.carta__acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; }

/* ---------------------------------------------------------------- contacto */
.contacto { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 4vw, 64px) var(--g); padding: clamp(100px, 11vw, 170px) var(--m); background: #fff; }
.contacto__head { display: grid; align-content: start; gap: 20px; }
.contacto__head .h2 { max-width: 9ch; }
.contacto__head > p { font-size: 16px; max-width: 30ch; }
.contacto__links { border-top: 1.5px solid var(--tinta); margin-top: 12px; }
.contacto__links a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); font-weight: 500; }
.contacto__links a:hover { color: var(--vino); }
.postal { position: relative; perspective: 1600px; }
.postal__front { position: absolute; inset: 6% 8% auto auto; width: 62%; transform: rotate(5deg); box-shadow: 0 20px 50px rgba(0,0,0,.18); z-index: 0; }
.postal__back { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; background: #fffdf8; margin-top: 18%; box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 30px 70px rgba(0,0,0,.16); transform-origin: center; transition: transform .9s var(--ease-io); }
.postal.is-sent .postal__back { transform: rotate(-2deg) translateY(-12px); }
.postal__msg { padding: clamp(22px, 3vw, 40px); border-right: 1px solid #d8d3c8; }
.postal__dir { padding: clamp(22px, 3vw, 40px); display: grid; align-content: start; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo span { font: 500 11px/1 var(--f2); letter-spacing: .14em; text-transform: uppercase; color: var(--mu-l); }
.campo input, .campo textarea { font: 400 17px/1.6 var(--f); color: var(--tinta); background: none; border: 0; border-bottom: 1px solid #bdb6a8; padding: 6px 0; border-radius: 0; outline: 0; width: 100%; }
.campo textarea { resize: vertical; min-height: 230px; border: 0; background: repeating-linear-gradient(transparent 0 calc(1.6em * 1 - 1px), #d8d3c8 calc(1.6em - 1px) 1.6em); line-height: 1.6em; background-attachment: local; }
.campo input:focus, .campo textarea:focus { border-color: var(--vino); }
.postal__para { font-size: 15px; border-bottom: 1px solid #bdb6a8; padding: 6px 0; }
.postal__stamp { position: relative; justify-self: end; width: 86px; margin-bottom: 6px; }
.postal__stamp img { transform: rotate(3deg); }
.postal__mark { position: absolute; width: 104px; left: -58px; top: 20px; color: var(--vino); opacity: .8; pointer-events: none; }
.postal__mark text { fill: currentColor; font-family: var(--f2); font-weight: 500; }
.sellos { border: 0; padding: 0; margin: 0; }
.sellos legend { font: 500 11px/1 var(--f2); letter-spacing: .14em; text-transform: uppercase; color: var(--mu-l); padding: 0; margin-bottom: 10px; }
.sellos__g { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.sello input { position: absolute; opacity: 0; pointer-events: none; }
.sello span { display: block; transition: transform .3s var(--ease), filter .3s; filter: grayscale(.7) opacity(.6); cursor: pointer; }
.sello input:checked + span { filter: none; transform: translateY(-4px) rotate(-3deg); }
.sello input:focus-visible + span { outline: 2px solid var(--vino); outline-offset: 2px; }
.postal__err { min-height: 1.4em; font-size: 14px; color: var(--vino); font-weight: 500; }

/* ---------------------------------------------------------------- fin */
.fin { background: #000; color: #fff; }
.fin__y { height: 80vh; height: 80svh; display: grid; place-items: center; }
.fin__y p { font: 500 clamp(14px, 1.3vw, 19px)/1 var(--f2); letter-spacing: .3em; text-transform: uppercase; transform: translateX(22vw); }
.fin__gracias { display: grid; grid-template-columns: 1fr 1fr; background: #fff; color: var(--tinta); }
.fin__txt { display: grid; align-content: center; justify-items: center; gap: 22px; text-align: center; padding: clamp(80px, 9vw, 140px) var(--m); }
.fin__txt > p:not(.hand) { font-size: 15px; line-height: 1.5; max-width: 48ch; }
.fin__amo { font-size: 30px; color: var(--vino); }
.fin__foto { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #ccc; }
.fin__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nota-att { position: absolute; left: 50%; top: 50%; width: min(44%, 300px); aspect-ratio: .82; transform: translate(-50%, -44%); background: #cfd1c4; color: #1d1d1b; display: grid; place-content: center; text-align: center; box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.nota-att p { font: 500 clamp(16px, 1.6vw, 22px)/1.05 var(--f2); }
.nota-att strong { font-size: 1.45em; font-weight: 600; letter-spacing: .02em; }
.nota-att__clip { position: absolute; top: -13%; left: 50%; width: 30%; transform: translateX(-50%); }
.bye { display: grid; place-items: center; min-height: 72vh; min-height: 72svh; background: #fff; color: var(--tinta); overflow: hidden; }
.bye__t { font: 800 clamp(96px, 24vw, 420px)/.8 var(--f); letter-spacing: -0.065em; white-space: nowrap; }

.pie { display: grid; grid-template-columns: 1.1fr 1fr 2fr auto; align-items: start; gap: 24px var(--g); padding: 44px var(--m) 36px; background: #fff; color: var(--tinta); border-top: 1.5px solid var(--tinta); font-size: 13px; line-height: 1.45; }
.pie__brand { display: flex; gap: 12px; align-items: start; }
.pie__brand .logo { width: 38px; }
.pie__nav { display: grid; gap: 4px; font-weight: 500; }
.pie__nav a:hover, .pie__cred a:hover { color: var(--vino); }
.pie__cred { color: var(--mu-l); display: grid; gap: 3px; }
.pie__top { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }

/* ---------------------------------------------------------------- historial (como el panel de un editor) */
.hist {
  position: fixed; right: var(--m); bottom: 20px; z-index: 70; width: 288px;
  background: #262626; color: #d6d6d6; font: 400 12px/1.3 var(--f);
  border: 1px solid #0e0e0e; box-shadow: 0 18px 50px rgba(0,0,0,.4);
  transform: translateY(12px); opacity: 0; visibility: hidden; transition: transform .45s var(--ease), opacity .3s, visibility 0s .45s;
}
.hist.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .45s var(--ease), opacity .3s; }
.hist__hd { display: flex; align-items: center; gap: 8px; padding: 0 0 0 12px; height: 32px; background: #1c1c1c; border-bottom: 1px solid #0e0e0e; }
.hist__hd p { font-weight: 600; color: #fff; }
.hist__hd span { color: #8a8a8a; font-variant-numeric: tabular-nums; margin-right: auto; }
.hist__hd button { width: 32px; height: 32px; font-size: 18px; color: #aaa; }
.hist__hd button:hover { color: #fff; }
.hist__list { max-height: min(46vh, 330px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.hist__list li button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; text-align: left; border-bottom: 1px solid #1f1f1f; }
.hist__list li button:hover { background: #303030; }
.hist__list .sw { width: 18px; height: 14px; flex: none; border: 1px solid rgba(255,255,255,.2); background: var(--sw, #800000); }
.hist__list .is-now button { background: #3d3d3d; color: #fff; }
.hist__list .is-future button { color: #6f6f6f; font-style: italic; }
.hist__list .is-future .sw { opacity: .4; }
.hist__list .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist__list .pg { color: #7d7d7d; font-size: 11px; }
.hist__ft { display: flex; border-top: 1px solid #0e0e0e; }
.hist__ft button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; color: #cfcfcf; }
.hist__ft button + button { border-left: 1px solid #0e0e0e; }
.hist__ft button:hover:not(:disabled) { background: #303030; color: #fff; }
.hist__ft button:disabled { color: #5c5c5c; cursor: default; }
.hist__tip { padding: 8px 12px 10px; color: #8a8a8a; font-size: 11px; border-top: 1px solid #1f1f1f; }
.hist__tip kbd { min-width: 0; height: 18px; padding: 0 4px; font-size: 10px; border-color: #666; color: #bbb; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: #111; color: #fff; font: 500 13px/1 var(--f); box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .45s var(--ease), opacity .3s; white-space: nowrap; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast kbd { font: 600 10px/1 var(--f); border: 1px solid #666; border-bottom-width: 2px; border-radius: 3px; padding: 3px 5px; }

.cursor { position: fixed; left: 0; top: 0; z-index: 85; pointer-events: none; }
.cursor span { display: block; transform: translate(-50%, -50%) scale(0); padding: 10px 14px; background: var(--vino); color: #fff; font: 500 12px/1 var(--f2); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: transform .35s var(--ease); }
.cursor.is-on span { transform: translate(-50%, -50%) scale(1); }

.curtain { position: fixed; inset: 0; z-index: 95; background: var(--vino); color: #fff; display: grid; place-items: center; pointer-events: none; clip-path: inset(100% 0 0 0); }
.curtain .logo { width: 84px; opacity: 0; }

.zoom { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; background: rgba(10, 4, 20, .9); padding: 5vh 5vw; cursor: zoom-out; opacity: 0; transition: opacity .3s; }
.zoom.is-on { opacity: 1; }
.zoom img { max-height: 90vh; width: auto; box-shadow: 0 30px 80px rgba(0,0,0,.5); }

/* ---------------------------------------------------------------- animación base */
html.js [data-rise] { opacity: 0; transform: translateY(30px); }
html.js [data-reveal] { clip-path: inset(100% 0 0 0); }
html.js .is-in[data-rise] { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
html.js .is-in[data-reveal] { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--ease); }
.split-line { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }

/* ================================================================ proyectos */
body[data-page="proyecto"] { background: var(--bg); color: var(--fg); }
.pj { background: var(--bg); color: var(--fg); }
.ph { position: relative; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }
.ph__txt { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; padding: calc(var(--hd-h) + 40px) var(--m) clamp(40px, 5vw, 64px); }
.ph__crumb { margin-bottom: auto; display: flex; flex-wrap: wrap; gap: 8px; font: 500 13px/1 var(--f); color: var(--mu); }
.ph__crumb a:hover { color: var(--fg); }
.ph__t { --col: calc(50vw - var(--m) * 2); font: 800 min(clamp(54px, 7.6vw, 140px), calc(var(--col) / (var(--lw, 8) * .56))) / .88 var(--f); letter-spacing: -0.055em; color: var(--tt, var(--ac)); max-width: 100%; }
[data-split-chars] > div { white-space: nowrap; }
.ph__tag { font: 300 clamp(22px, 2.3vw, 36px)/1.14 var(--f); letter-spacing: -0.022em; max-width: 18ch; }
.ph__q { display: grid; gap: 8px; max-width: 36ch; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); font-size: 16px; line-height: 1.4; }
.ph__q span { font: 500 11px/1 var(--f2); letter-spacing: .14em; text-transform: uppercase; color: var(--mu); }
.ph__sello { align-self: start; font-size: 28px; color: var(--ac); transform: rotate(-4deg); }
.ph__img { position: relative; overflow: hidden; height: 100vh; height: 100svh; }
.ph__img img { width: 100%; height: 100%; object-fit: cover; }
.ph__img--contain img { object-fit: contain; padding: calc(var(--hd-h) + 16px) clamp(20px, 4vw, 64px) clamp(24px, 4vw, 64px); }
.ph__xs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-content: center; height: 100svh; padding: var(--hd-h) 0 0; }
.ph__xs figure { aspect-ratio: 1; overflow: hidden; }
.ph__xs img { width: 100%; height: 100%; object-fit: cover; }
.ph__tt { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ph__tt-svg { width: 100%; height: 100%; }
.ph__tt-svg path:first-child { display: none; }
.ph--timeless { grid-template-columns: 1fr; }
.ph--timeless .ph__txt { position: relative; z-index: 1; justify-content: center; align-items: flex-end; text-align: right; }
.ph--timeless .ph__crumb { position: absolute; top: calc(var(--hd-h) + 40px); left: var(--m); }
.ph--alianza { overflow: hidden; }
.ph--alianza .ph__txt { position: relative; z-index: 1; }
.ph--alianza .ph__af { position: relative; height: 100svh; overflow: hidden; }
.ph__af-svg { position: absolute; z-index: 0; left: -7vw; top: -7vh; height: 56vh; width: auto; max-width: none; pointer-events: none; }
.ph--alianza .ph__txt { align-items: flex-end; text-align: right; }
.ph--alianza .ph__crumb { align-self: flex-end; position: relative; z-index: 1; }
.ph--timeless .ph__t { --col: 62vw; }
.ph--timeless .ph__txt > * { width: fit-content; background: var(--bg); padding: .06em .18em; }
.ph--timeless .ph__crumb { background: none; }
.ph__af-svg path:first-child { display: none; }
.ph__af-foto { position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: .5; border-radius: 0 0 0 0; overflow: hidden; clip-path: ellipse(100% 62% at 100% 50%); }
.ph__af-foto img { width: 100%; height: 100%; object-fit: cover; }
.ph--alianza { grid-template-columns: 1fr 1fr; }
.ph--alianza .ph__txt { order: -1; }

.pmeta { padding: 0 var(--m); }
.pmeta dl { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: var(--g); padding: 22px 0; border-top: 1px solid color-mix(in srgb, var(--fg) 28%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--fg) 28%, transparent); }
.pmeta dt { font: 500 11px/1 var(--f2); letter-spacing: .14em; text-transform: uppercase; color: var(--mu); margin-bottom: 8px; }
.pmeta dd { font-size: 15px; line-height: 1.45; }
.pmeta dd span { color: var(--mu); }

.pj__body { padding-bottom: clamp(70px, 8vw, 120px); }
.b { padding: clamp(64px, 9vw, 150px) var(--m) 0; }
.b-label { font: 500 12px/1.3 var(--f2); letter-spacing: .16em; text-transform: uppercase; color: var(--mu); }
.b-lead { padding-left: calc(var(--m) + 24%); }
.b-lead .lead { max-width: 30ch; }
.b-texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--g); }
.b-texto__c { columns: 2; column-gap: clamp(24px, 3vw, 48px); max-width: 920px; font-size: 17px; }
.b-texto__c p { break-inside: avoid-column; margin-bottom: 1em; }
.b-def { display: grid; gap: 10px; padding-left: calc(var(--m) + 24%); }
.b-def__w { font: 700 clamp(48px, 8.2vw, 150px)/.9 var(--f); letter-spacing: -0.055em; }
.b-def__f { font: 300 italic clamp(17px, 1.5vw, 22px)/1.2 var(--f); color: var(--mu); }
.b-def__s { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.35; max-width: 34ch; border-top: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); padding-top: 14px; }
.b-img figure { position: relative; overflow: hidden; }
.b-img img { width: 100%; }
.b-img--full figure { margin: 0 calc(var(--m) * -1); }
.b-img--wide figure { background: var(--fbg, transparent); }
.b-img--inset figure { width: min(100%, 820px); margin: 0 auto; }
.b-img__over { position: absolute; left: 4%; top: 6%; width: 52%; }
.b-img__over svg { width: 100%; height: auto; }
.b-img__over path[fill="#000000"] { display: none; }
.b-img__rot { display: flex; justify-content: space-between; font: 400 clamp(20px, 2.4vw, 38px)/1 var(--f2); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.b-img__cap { margin-top: 28px; max-width: 34ch; }
.b-half { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); align-items: center; }
.b-half figure { overflow: hidden; }
.b-half img { width: 100%; }
.b-half .lead { max-width: 22ch; }
.b-fila { display: flex; gap: var(--g); align-items: flex-start; }
.b-fila figure { flex: var(--r) 1 0; min-width: 0; overflow: hidden; }
.b-fila img { width: 100%; }
.b-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--g); }
.b-stats .stat { border-top: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); padding-top: 18px; display: grid; gap: 14px; }
.b-stats .stat__n { color: var(--ac); }
.stat__u { font-size: .42em; letter-spacing: -0.03em; margin-left: .06em; }
.b-stats .stat__d { font-size: 16px; }
.b-lista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--g); }
.b-lista ul { display: flex; flex-wrap: wrap; gap: 10px; }
.b-lista li { border: 1px solid currentColor; padding: 9px 14px; font-size: 15px; line-height: 1; }
.b-lista--g ul { display: grid; gap: 0; }
.b-lista--g li { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); padding: 10px 0 14px; font: 700 clamp(44px, 7vw, 124px)/.9 var(--f); letter-spacing: -0.055em; color: var(--ac); }
.b-lista li span { font: 700 12px/1 var(--f); margin-right: 14px; vertical-align: .3em; opacity: .7; }
.pj--alianza .b-lista ul { display: grid; gap: 0; }
.pj--alianza .b-lista li { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 35%, transparent); padding: 16px 0; font: 600 clamp(24px, 2.6vw, 40px)/1.05 var(--f); letter-spacing: -0.03em; }
.b-cita blockquote { padding-left: calc(24% - var(--g)); }
.b-cita p { font: 500 clamp(30px, 4.4vw, 78px)/1.02 var(--f); letter-spacing: -0.042em; max-width: 19ch; }
.b-cita strong { font-weight: 800; color: var(--ac); }
.b-cita footer { margin-top: 18px; font: 500 12px/1 var(--f2); letter-spacing: .16em; text-transform: uppercase; color: var(--mu); }
.b-cita--oasis { margin-top: clamp(64px, 9vw, 150px); padding: clamp(80px, 12vw, 200px) var(--m); background: #e70491; color: #fff; text-align: center; }
.b-cita--oasis blockquote { padding: 0; }
.b-cita--oasis p { margin: 0 auto; max-width: 14ch; font: 800 clamp(38px, 6.2vw, 112px)/1 'Montserrat', var(--f); letter-spacing: -0.01em; text-transform: uppercase; }
.b-cita--oasis p::before, .b-cita--oasis p::after { display: block; font-size: 1.6em; line-height: .8; height: .55em; }
.b-cita--oasis p::before { content: '“'; }
.b-cita--oasis p::after { content: '”'; margin-top: .3em; }
.b-seq { position: relative; height: calc(var(--n, 4) * 60vh + 100vh); padding-top: 0; margin-top: clamp(64px, 9vw, 150px); }
.b-seq__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding-top: var(--hd-h); }
.b-seq__txt { display: grid; gap: 16px; align-content: center; }
.b-seq__txt > p { font-size: 17px; max-width: 34ch; }
.b-seq__steps { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 700 13px/1 var(--f); color: var(--mu); }
.b-seq__steps li { transition: color .3s; }
.b-seq__steps li.is-now { color: var(--fg); }
.b-seq__bar { height: 2px; background: color-mix(in srgb, var(--fg) 20%, transparent); }
.b-seq__bar span { display: block; height: 100%; background: var(--ac); transform-origin: left; transform: scaleX(0); }
.b-seq__stage { position: relative; height: 78vh; height: 78svh; }
.b-seq__stage figure { position: absolute; inset: 0; opacity: 0; }
.b-seq__stage figure:first-child { opacity: 1; }
.b-seq__stage img { width: 100%; height: 100%; object-fit: contain; }
.b-car__hd { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; }
.b-car__hint { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--f); color: var(--mu); }
.b-car__track { display: flex; gap: var(--g); overflow-x: auto; scroll-snap-type: x proximity; margin: 0 calc(var(--m) * -1); padding: 0 var(--m) 14px; cursor: grab; scrollbar-width: thin; scrollbar-color: var(--ac) transparent; overscroll-behavior-x: contain; }
.b-car__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.b-car__track figure { flex: 0 0 clamp(270px, 34vw, 560px); scroll-snap-align: start; }
.b-car__track img { width: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.b-paleta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--g); }
.b-paleta ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
.b-paleta button { display: grid; gap: 6px; width: 100%; text-align: left; }
.sw { display: block; aspect-ratio: 1.25; background: var(--sw); border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent); transition: transform .4s var(--ease); }
.b-paleta button:hover .sw { transform: translateY(-4px); }
.sw__n { font-size: 15px; font-weight: 600; }
.sw__h { font-size: 13px; color: var(--mu); font-variant-numeric: tabular-nums; }
.b-logo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.b-logo__art { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.b-logo__art svg { width: 100%; height: auto; }
.b-logo__iso { padding-top: 8%; }
.b-logo .lead { max-width: 24ch; }
.b-stk { position: relative; height: 70vh; height: 70svh; min-height: 440px; margin: clamp(64px, 9vw, 150px) var(--m) 0; padding: 0; background: #faf5f7; overflow: hidden; }
.b-stk__hint { position: absolute; left: 24px; top: 18px; font-size: 26px; color: var(--ac); }
.stk { position: absolute; width: clamp(110px, 12vw, 180px); cursor: grab; touch-action: none; user-select: none; filter: drop-shadow(0 8px 12px rgba(0,0,0,.14)); transition: filter .3s; }
.stk.is-drag { cursor: grabbing; filter: drop-shadow(0 18px 22px rgba(0,0,0,.22)); z-index: 5; }
.stk img { pointer-events: none; -webkit-user-drag: none; }
.b-pasos ol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin-top: 24px; }
.b-pasos li { display: grid; gap: 14px; justify-items: center; text-align: center; border-top: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); padding-top: 18px; }
.b-pasos__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #8a5a3c; color: #fff; font: 600 15px/1 var(--f); }
.b-pasos figure { height: clamp(240px, 28vw, 400px); }
.b-pasos figure img { height: 100%; width: auto; }
.b-pasos li p { font: 600 18px/1.3 'Switzer', var(--f); max-width: 22ch; }
.b-pasos__x { max-width: 46ch; margin: 28px auto 0; text-align: center; font-size: 17px; }
.b-antes__stage { --x: 50%; position: relative; height: min(84vh, 760px); background: color-mix(in srgb, var(--fg) 6%, var(--bg)); overflow: hidden; touch-action: pan-y; cursor: ew-resize; }
.b-antes__stage figure { position: absolute; inset: 0; }
.b-antes__stage img { width: 100%; height: 100%; object-fit: contain; padding: clamp(16px, 3vw, 48px); }
.b-antes__a { background: color-mix(in srgb, var(--fg) 6%, var(--bg)); clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.b-antes__a img { filter: grayscale(1) contrast(1.05); }
.b-antes__h { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: var(--fg); transform: translateX(-1px); }
.b-antes__h span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--fg); color: var(--bg); transform: translate(-50%, -50%); }
.b-antes__h span .i { width: 18px; height: 18px; }
.b-antes__cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 14px; color: var(--mu); }
.b-antes__cap strong { color: var(--fg); font-weight: 600; }
.b-giro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); align-items: end; }
.b-giro figure { display: grid; gap: 14px; justify-items: center; }
.b-giro img { height: clamp(200px, 24vw, 380px); width: auto; object-fit: contain; }
.b-giro figcaption { font: 500 12px/1 var(--f2); letter-spacing: .16em; text-transform: uppercase; color: var(--mu); }
.b-sellos__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 36px); max-width: 720px; margin: 28px auto 0; }
.b-sellos__g figure { transition: transform .5s var(--ease); }
.b-sellos__g figure:nth-child(odd):hover { transform: rotate(-4deg) translateY(-6px); }
.b-sellos__g figure:nth-child(even):hover { transform: rotate(4deg) translateY(-6px); }
.xgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.xgrid button { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; cursor: zoom-in; }
.xgrid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.xgrid button:hover img { transform: scale(1.08); }
.xgrid figcaption { font: 500 11px/1 var(--f); color: var(--mu); margin-top: 6px; }
.b-xgrid__n { margin-top: 18px; font-size: 14px; color: var(--mu); }
.b-glifos { display: grid; gap: clamp(40px, 6vw, 96px); }
.glifos__svg { width: calc(100% + var(--m) * 2); max-width: none; height: auto; margin: 0 calc(var(--m) * -1); }
.glifos__svg path:first-child { display: none; }
.glifos__anat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g); align-items: center; }
.anat__svg { width: 100%; height: auto; }
.anat__svg path { fill: var(--fg); }
.glifos__parts { display: flex; flex-wrap: wrap; gap: 8px; }
.glifos__parts li { border: 1px solid currentColor; padding: 8px 12px; font-size: 14px; line-height: 1; }
.b-juego .memo { margin: 0 calc(var(--m) * -1); background: transparent; padding-top: 0; padding-bottom: 0; }

.pnav { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 40px var(--m); border-top: 1px solid color-mix(in srgb, var(--fg) 28%, transparent); }
.pnav__ant { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.pnav__ant span { color: var(--mu); }
.pnav__idx { font: 500 14px/1 var(--f); border-bottom: 1.5px solid currentColor; padding-bottom: 4px; }
.next { position: relative; display: grid; align-content: end; gap: 12px; min-height: 86vh; min-height: 86svh; padding: 64px var(--m); background: var(--nbg); color: var(--nfg); overflow: hidden; }
.next__k { font: 500 12px/1 var(--f2); letter-spacing: .16em; text-transform: uppercase; }
.next__t { font: 800 min(clamp(56px, 10vw, 190px), calc((100vw - var(--m) * 2) * .62 / (var(--lw, 8) * .56))) / .86 var(--f); letter-spacing: -0.06em; max-width: 62%; position: relative; z-index: 1; }
.next__tag { font: 300 clamp(20px, 2vw, 30px)/1.2 var(--f); letter-spacing: -0.02em; max-width: 24ch; position: relative; z-index: 1; }
.next__img { position: absolute; right: var(--m); top: 50%; width: clamp(200px, 25vw, 420px); aspect-ratio: 4 / 5; overflow: hidden; transform: translateY(-58%) rotate(4deg); transition: transform .9s var(--ease); }
.next__img img { width: 100%; height: 100%; object-fit: cover; }
.next:hover .next__img { transform: translateY(-58%) rotate(0) scale(1.04); }

/* temas por proyecto */
.pj--cualoni { --tt: #e40422; }
.pj--voi { --tt: #fcee21; }
.pj--nefelibata { --tt: #141414; }
.pj--oasis { --tt: #ffffff; }
.pj--colochas { --tt: #ed1763; }
.pj--aemedia { --tt: #111; }
.pj--bioshot { --tt: #f6f1e7; }
.pj--letour { --tt: #211c63; }
.pj--vibe { --tt: #1a1a1a; }
.pj--x { --tt: #ff70c0; }
.pj--timeless { --tt: #c34811; }
.pj--eduardo { --tt: #151515; }
.pj--ecosistemas { --tt: #db5e3d; }
.pj--postal { --tt: #ffffff; }
.pj--witch { --tt: #2a0e4a; }
.pj--alianza { --tt: #fdf4e3; }
.pj--colochas .b-stk { background: #fdeef3; }
.pj--ecosistemas .ph__img, .pj--eduardo .ph__img { background: color-mix(in srgb, var(--fg) 4%, var(--bg)); }
.pj--aemedia .pj__body { background: #fff; }
.pj--aemedia .pj__body .b-label { color: #6a5d00; }
.pj--aemedia .b-cita strong { color: #111; box-shadow: inset 0 -.22em 0 #f0cf08; }
.pj--aemedia .b-lista li { border-color: #111; }
.pj--letour .ph__img { background: #000930; }
.pj--postal .b-giro img { filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }

/* ================================================================ responsive */
@media (max-width: 1180px) {
  .hd__nav { gap: 18px; }
  .rh { display: none; }
  .proc__list { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .xgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1181px) {
  body[data-page="home"] .rh, body[data-page="proyecto"] .rh { opacity: 1; }
}
@media (max-width: 899px) {
  :root { --hd-h: 58px; }
  body { font-size: 16px; }
  .hd { gap: 16px; }
  .hd__nav { display: none; }
  .hd__menu { display: block; }
  .hd__brand span { display: none; }
  .hero__t { font-size: clamp(50px, 14.6vw, 104px); letter-spacing: -0.055em; }
  .hero__bottom { grid-template-columns: 1fr auto; row-gap: 28px; }
  .hero__quote { grid-column: 1 / -1; order: 2; }
  .keys { order: 1; }
  .hero__down { order: 1; }
  .ctrlz { grid-template-columns: 1fr; }
  .ctrlz__photo { position: relative; height: 82svh; order: -1; }
  .ctrlz__text { padding-top: 64px; }
  .ctrlz__body { margin-left: 0; }
  .azu { grid-template-columns: 1fr; }
  .azu__l { min-height: 92svh; }
  .azu__kid { width: min(78%, 380px); }
  .proc__head { grid-template-columns: 1fr; }
  .idx__row { grid-template-columns: 40px minmax(0, 1fr) 18px; padding: 14px 0; }
  .idx__k { grid-column: 2; grid-row: 2; font-size: 13px; margin-top: -6px; }
  .idx__row .i { opacity: 1; transform: none; width: 18px; grid-row: 1; grid-column: 3; }
  .idx__prev { display: none; }
  .cat__head { grid-template-columns: 1fr; }
  .reel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .reel::-webkit-scrollbar { display: none; }
  .reel__track { padding-top: 28px; }
  .card { --h: auto; width: 78vw; scroll-snap-align: center; }
  .card__img { height: auto; aspect-ratio: var(--r); max-height: 68svh; }
  .lab__head { grid-template-columns: 1fr; }
  .xfield__t { font-size: clamp(32px, 9.4vw, 60px); }
  .carta__head { flex-direction: column; align-items: start; gap: 12px; }
  .lab__sub { text-align: left; }
  .memo { grid-template-columns: 1fr; }
  .memo__board { justify-self: stretch; gap: 8px; }
  .cv__top { flex-direction: column; align-items: start; }
  .cv__hint { text-align: left; }
  .ws__tabs span:not(.is-on) { display: none; }
  .ws__tabs span { overflow: hidden; text-overflow: ellipsis; }
  .ws__body { grid-template-columns: 1fr; }
  .ws__tools, .ws__ruler, .ab__guide { display: none; }
  .ws__canvas { padding: 28px 12px 32px; }
  .ab { padding: 22px 18px; }
  .ab__id { grid-template-columns: auto 1fr; }
  .ab__contact { grid-column: 1 / -1; text-align: left; display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .ab__grid, .ab__grid--b { grid-template-columns: 1fr; }
  .ws__panels { border-left: 0; border-top: 1px solid #111; }
  .pn__layers { display: grid; grid-template-columns: 1fr 1fr; }
  .pn__layers li { border-right: 1px solid #1f1f1f; }
  .pn__name { font-size: 12px; padding: 9px 8px; }
  .pn__thumb { display: none; }
  .ws__status span:nth-child(2) { display: none; }
  .contacto { grid-template-columns: 1fr; }
  .postal__front { position: relative; inset: auto; width: 84%; margin: 0 0 -26% auto; }
  .postal__back { grid-template-columns: 1fr; margin-top: 0; }
  .postal__msg { border-right: 0; border-bottom: 1px solid #d8d3c8; }
  .sellos__g { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fin__y p { transform: none; }
  .fin__gracias { grid-template-columns: 1fr; }
  .fin__foto { min-height: 110svh; }
  .pie { grid-template-columns: 1fr 1fr; }
  .pie__cred { grid-column: 1 / -1; }

  .ph, .ph--alianza { grid-template-columns: 1fr; min-height: 0; }
  .ph__txt { min-height: 74svh; padding-top: calc(var(--hd-h) + 28px); }
  .ph__img { height: auto; aspect-ratio: 4 / 5; max-height: 92svh; }
  .ph__img--contain img { padding: 24px; }
  .ph__xs { height: auto; padding: 0; }
  .ph--timeless .ph__txt { min-height: 100svh; }
  .ph--alianza .ph__af { height: 110vw; }
  .ph__af-svg { height: 30svh; left: auto; right: -6vw; top: calc(var(--hd-h) + 1svh); }
  .ph--alianza .ph__txt { align-items: flex-start; text-align: left; }
  .ph--timeless .ph__t { --col: calc(100vw - var(--m) * 2); }
  .ph__t { --col: calc(100vw - var(--m) * 2); }
  .pmeta dl { grid-template-columns: 1fr; gap: 18px; }
  .b-lead, .b-def { padding-left: var(--m); }
  .b-texto, .b-lista, .b-paleta { grid-template-columns: 1fr; gap: 18px; }
  .b-texto__c { columns: 1; }
  .b-half, .b-logo { grid-template-columns: 1fr; }
  .b-fila { flex-direction: column; }
  .b-fila figure { flex: none; width: 100%; }
  .b-cita blockquote { padding-left: 0; }
  .b-seq { height: calc(var(--n, 4) * 50vh + 100vh); }
  .b-seq__pin { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 16px; padding-top: calc(var(--hd-h) + 12px); padding-bottom: 20px; }
  .b-seq__txt { gap: 10px; }
  .b-seq__txt > p { font-size: 15px; }
  .b-seq__stage { height: auto; }
  .b-paleta ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-pasos ol { grid-template-columns: 1fr; }
  .b-giro { grid-template-columns: 1fr; }
  .glifos__anat { grid-template-columns: 1fr; }
  .xgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .next__img { position: relative; right: auto; top: auto; transform: rotate(3deg); width: 62vw; margin: 0 0 28px auto; order: -1; }
  .next:hover .next__img { transform: rotate(0); }
  .next { align-content: end; }
  .hist { left: 12px; right: 12px; width: auto; bottom: 12px; }
}
@media (max-width: 520px) {
  .hero__top { font-size: 13px; }
  .key { height: 54px; min-width: 54px; }
  .key:first-child { min-width: 74px; }
  .idx__head { flex-direction: column; align-items: start; }
  .idx__sub { text-align: left; }
  .memo__board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .mcard, .mcard__b, .mcard__f { border-radius: 5px; }
  .pie { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js [data-rise] { opacity: 1; transform: none; }
  html.js [data-reveal] { clip-path: none; }
}

/* cortina entre páginas: la página nueva arranca tapada y se destapa */
html.from-nav .curtain { clip-path: inset(0 0 0 0); }
html.from-nav .curtain .logo { opacity: 1; }

/* ================================================================ recortes que flotan */
.fl { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; transform: translate(-50%, -50%) rotate(var(--r)); will-change: transform; pointer-events: none; }
.fl img { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(0,0,0,.28)); }
.fl__in { display: block; }
.fl--swing { transform-origin: 50% 2%; }
.ph__fl, .ph__x3d { position: relative; height: 100vh; height: 100svh; overflow: visible; }
.ph__fl .fl img { filter: drop-shadow(0 30px 40px rgba(0,0,0,.32)); }
.pj--voi .ph__fl .fl img { filter: drop-shadow(0 40px 50px rgba(0,0,20,.55)); }
.ph--x { grid-template-columns: 1fr; }
.ph--x .ph__txt { position: relative; z-index: 2; align-items: center; text-align: center; justify-content: center; pointer-events: none; }
.ph--x .ph__txt a { pointer-events: auto; }
.ph--x .ph__t { --col: 70vw; max-width: none; }
.ph--x .ph__crumb { position: absolute; top: calc(var(--hd-h) + 40px); left: var(--m); margin: 0; }
.ph--x .ph__q { text-align: left; }
.ph__x3d { position: absolute; inset: 0; height: auto; z-index: 1; }
.ph__x3d .fl { pointer-events: auto; cursor: grab; }
.ph__x3d .fl img { filter: drop-shadow(0 20px 26px rgba(10, 0, 30, .45)); }
.b-obj { position: relative; }
.b-obj--f { margin-top: clamp(64px, 9vw, 150px); padding-top: 0; background: var(--fbg); }
.b-obj__x { position: relative; z-index: 2; max-width: 22ch; padding-top: 6vh; }
.b-obj--f .b-obj__x { padding-top: clamp(40px, 6vw, 80px); }
.b-obj__stage { position: relative; height: min(88vh, 900px); }
.b-obj--f .b-obj__stage { margin: 0 calc(var(--m) * -1); }

/* pared de señales */
.b-pared__hd { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }
.b-pared__hint { font-size: 13px; color: var(--mu); }
.pared { position: relative; height: min(92vh, 860px); margin: 0 calc(var(--m) * -1); background: #ece7dd linear-gradient(180deg, rgba(255,255,255,.4), rgba(0,0,0,.05)); perspective: 1200px; overflow: hidden; }
.pared::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: linear-gradient(180deg, #d9d2c4, #cfc7b8); box-shadow: 0 -1px 0 rgba(0,0,0,.08); }
.sena { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; transform: rotate(var(--r)); transform-style: preserve-3d; transition: transform .6s var(--ease); z-index: 1; }
.sena img { width: 100%; height: auto; filter: drop-shadow(0 14px 16px rgba(60, 40, 20, .25)); }

/* lab con física */
.xfield { cursor: default; touch-action: pan-y; }
.xfield.is-grab { cursor: grabbing; }
.xb { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform; }
.xb img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(10, 0, 25, .45)); -webkit-user-drag: none; user-select: none; }
.xfield__c { pointer-events: none; z-index: 1; place-content: start center; padding-top: clamp(60px, 9vh, 110px); }
.xfield__hint { font-size: 22px; }
.xfield__shake { position: absolute; z-index: 3; left: var(--m); bottom: 22px; display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 500 13px/1 var(--f); border-bottom: 1px solid currentColor; padding: 6px 0; }

/* memoria: que todo el tablero quepa en pantalla */
.memo__board { --gap: clamp(8px, 1vw, 14px); gap: var(--gap); width: 100%; max-width: min(680px, calc((100svh - 150px - 3 * var(--gap)) * .778 + 3 * var(--gap))); }
.memo { min-height: 100svh; }
.b-juego .memo { min-height: 0; }

@media (max-width: 899px) {
  .ph__fl, .ph__x3d { height: 92vw; }
  .ph--x .ph__txt { min-height: 100svh; }
  .ph__x3d { height: auto; }
  .b-obj__stage { height: 112vw; }
  .pared { height: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 26px 18px; padding: 32px 22px 70px; }
  .sena { position: relative; left: auto; top: auto; width: auto; }
  .sena--w { grid-column: 1 / -1; }
  .ph__fl .fl { width: calc(var(--w) * 1.12); }
  .b-obj__stage .fl { width: calc(var(--w) * 1.6); }
  .ph__x3d .fl { width: calc(var(--w) * 2.1); }
  .ph__x3d .fl:nth-child(n+8) { display: none; }
  .mx__wrap { position: relative; margin-right: -18px; padding-right: 18px; }
  .ab__k span { display: block; margin: 6px 0 0; }
  .b-pared__hd { flex-direction: column; align-items: start; gap: 6px; }
  .xfield__hint { font-size: 19px; }
  .memo { min-height: 0; }
}
.mx__swipe { display: none; font-style: normal; color: var(--vino); }
@media (max-width: 899px) { .mx__swipe { display: inline; } }