/* ==========================================================================
   Bruno Fabián Sotomayor — Estilos
   Sistema: papel + tinta + un acento. Tipografía editorial gigante,
   serif itálica como contrapunto y etiquetas en monoespaciada.
   ========================================================================== */

/* ---------- 01. Tokens ---------- */
:root {
  --paper: #EEEAE2;
  --ink: #121211;
  --accent: #0068FF;
  --ico-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1579.5' height='1470.28' viewBox='0 0 1579.5 1470.28' fill='%23000'%3E%3Cpath d='M598.85%2C804.31c-221.75%2C0-402.15-180.4-402.15-402.15S377.1%2C0%2C598.85%2C0s402.16%2C180.4%2C402.16%2C402.16-180.41%2C402.15-402.16%2C402.15ZM598.85%2C29.11c-205.69%2C0-373.03%2C167.35-373.03%2C373.04s167.34%2C373.04%2C373.03%2C373.04%2C373.04-167.35%2C373.04-373.04S804.54%2C29.11%2C598.85%2C29.11Z'/%3E%3Cpath d='M986.44%2C804.31c-221.75%2C0-402.16-180.4-402.16-402.15S764.7%2C0%2C986.44%2C0s402.16%2C180.4%2C402.16%2C402.16-180.41%2C402.15-402.16%2C402.15ZM986.44%2C29.11c-205.69%2C0-373.04%2C167.35-373.04%2C373.04s167.35%2C373.04%2C373.04%2C373.04%2C373.04-167.35%2C373.04-373.04S1192.14%2C29.11%2C986.44%2C29.11Z'/%3E%3Cpath d='M789.75%2C1139.86c-221.75%2C0-402.16-180.4-402.16-402.16s180.41-402.15%2C402.16-402.15%2C402.15%2C180.4%2C402.15%2C402.15-180.4%2C402.16-402.15%2C402.16ZM789.75%2C364.67c-205.69%2C0-373.04%2C167.35-373.04%2C373.04s167.35%2C373.04%2C373.04%2C373.04%2C373.03-167.35%2C373.03-373.04-167.34-373.04-373.03-373.04Z'/%3E%3Cpath d='M402.16%2C1139.86C180.41%2C1139.86%2C0%2C959.45%2C0%2C737.7s180.41-402.15%2C402.16-402.15%2C402.16%2C180.4%2C402.16%2C402.15-180.41%2C402.16-402.16%2C402.16ZM402.16%2C364.67c-205.69%2C0-373.04%2C167.35-373.04%2C373.04s167.35%2C373.04%2C373.04%2C373.04%2C373.04-167.35%2C373.04-373.04-167.35-373.04-373.04-373.04Z'/%3E%3Cpath d='M1177.34%2C1139.86c-221.75%2C0-402.15-180.4-402.15-402.16s180.4-402.15%2C402.15-402.15%2C402.16%2C180.4%2C402.16%2C402.15-180.41%2C402.16-402.16%2C402.16ZM1177.34%2C364.67c-205.69%2C0-373.03%2C167.35-373.03%2C373.04s167.34%2C373.04%2C373.03%2C373.04%2C373.04-167.35%2C373.04-373.04-167.35-373.04-373.04-373.04Z'/%3E%3Cpath d='M592.25%2C1470.28c-221.75%2C0-402.15-180.4-402.15-402.15s180.4-402.16%2C402.15-402.16%2C402.16%2C180.4%2C402.16%2C402.16-180.41%2C402.15-402.16%2C402.15ZM592.25%2C695.09c-205.69%2C0-373.03%2C167.35-373.03%2C373.04s167.34%2C373.04%2C373.03%2C373.04%2C373.04-167.35%2C373.04-373.04-167.35-373.04-373.04-373.04Z'/%3E%3Cpath d='M986.44%2C1470.28c-221.75%2C0-402.16-180.4-402.16-402.15s180.41-402.16%2C402.16-402.16%2C402.16%2C180.4%2C402.16%2C402.16-180.41%2C402.15-402.16%2C402.15ZM986.44%2C695.09c-205.69%2C0-373.04%2C167.35-373.04%2C373.04s167.35%2C373.04%2C373.04%2C373.04%2C373.04-167.35%2C373.04-373.04-167.35-373.04-373.04-373.04Z'/%3E%3C/svg%3E"); /* assets/img/icono.svg */
  --blue: #2C3BFF;
  --lime: #D6FF3D;
  --rose: #FF9EC4;
  --danger: #E5484D;

  --sans: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  --gutter: clamp(16px, 2.4vw, 40px);
  --header-h: clamp(64px, 6vw, 88px);
  --radius: clamp(12px, 1.3vw, 22px);
  --cover-ratio: 4 / 5; /* proporción de todas las portadas */

  --fs-mega: clamp(3rem, 12.2vw, 15rem);
  --fs-h1: clamp(2.8rem, 8.2vw, 9.5rem);
  --fs-h2: clamp(2rem, 4.6vw, 5rem);
  --fs-h3: clamp(1.45rem, 2.3vw, 2.4rem);
  --fs-lead: clamp(1.12rem, 1.5vw, 1.55rem);
  --fs-body: clamp(1rem, 1.02vw, 1.08rem);
  --fs-small: .74rem;

  --bg: var(--paper);
  --fg: var(--ink);
  color-scheme: light;
}

html.is-night {
  --paper: #121211;
  --ink: #EEEAE2;
  color-scheme: dark;
}

/* Temas por sección (el body cambia al cruzar cada sección) */
body[data-theme='light'] { --bg: var(--paper); --fg: var(--ink); }
body[data-theme='dark'] { --bg: var(--ink); --fg: var(--paper); }
body[data-theme='accent'] { --bg: var(--accent); --fg: #121211; }
body[data-theme='project'] { --bg: var(--p-bg, var(--ink)); --fg: var(--p-fg, var(--paper)); }
.footer { --bg: var(--ink); --fg: var(--paper); }
[data-theme] {
  --line: color-mix(in srgb, var(--fg) 16%, transparent);
  --muted: color-mix(in srgb, var(--fg) 58%, transparent);
  --soft: color-mix(in srgb, var(--fg) 5%, transparent);
}

/* ---------- 02. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
html.is-locked { overflow: hidden; }

body {
  min-height: 100vh;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 400;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  transition: background-color .9s var(--ease-out), color .9s var(--ease-out);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
img, canvas, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: #121211; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

html.has-cursor, html.has-cursor * { cursor: none !important; }

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

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 10001;
  padding: .7rem 1rem; background: var(--accent); color: #121211; border-radius: 99px;
  transform: translateY(-200%); transition: transform .4s var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* ---------- 03. Tipografía ---------- */
em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}
.mono {
  font-family: var(--mono);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.4;
}
.label { color: var(--muted); transition: color .9s var(--ease-out); }
.h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.045em;
}
.h2 em { letter-spacing: -.02em; }

.container { padding-inline: var(--gutter); }

.section-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: start;
  margin-bottom: clamp(3rem, 6vw, 7rem);
}
.section-head .label { grid-column: 1 / span 3; padding-top: .6em; }
.section-head .h2 { grid-column: 4 / span 8; }

/* ---------- 04. Revelados ---------- */
[data-split='chars'] .line {
  display: block;
  overflow: hidden;
  padding: .04em .08em .12em;
  margin: -.04em -.08em -.12em;
}
.sw { display: inline-block; white-space: nowrap; }
.sc {
  display: inline-block;
  transform: translate3d(0, 115%, 0) rotate(8deg);
  transform-origin: 0 100%;
}
.is-in .sc {
  transform: none;
  transition: transform 1.25s var(--ease-out) calc(var(--ci) * 26ms + var(--d, 0ms));
}

[data-split='lines'] .sw {
  overflow: hidden;
  vertical-align: top;
  padding: 0 .06em .1em 0;
  margin: 0 -.06em -.1em 0;
}
.swi { display: inline-block; transform: translate3d(0, 105%, 0); }
.is-in .swi {
  transform: none;
  transition: transform 1.1s var(--ease-out) calc(var(--l, 0) * 85ms + var(--d, 0ms));
}

[data-reveal] { opacity: 0; transform: translate3d(0, 32px, 0); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-out) var(--d, 0ms), transform 1.2s var(--ease-out) var(--d, 0ms);
}

[data-reveal-clip] { clip-path: inset(100% 0 0 0 round var(--radius)); }
[data-reveal-clip].is-in {
  clip-path: inset(0 0 0 0 round var(--radius));
  transition: clip-path 1.5s var(--ease-io) var(--d, 0ms);
}
[data-reveal-clip] img, [data-reveal-clip] video { scale: 1.25; transition: scale 1.8s var(--ease-out); }
[data-reveal-clip].is-in img, [data-reveal-clip].is-in video { scale: 1; }

/* ---------- 05. Grano ---------- */
.grain {
  position: fixed;
  inset: -100%;
  width: 300%;
  height: 300%;
  z-index: 9000;
  pointer-events: none;
  opacity: .055;
  background-image: var(--grain);
  animation: grain 1.2s steps(6) infinite;
}
html.is-night .grain { opacity: .07; }
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---------- 06. Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--gutter);
  background: #121211;
  color: #EEEAE2;
  overflow: hidden;
}
.loader__top { display: flex; justify-content: space-between; gap: 1rem; opacity: .6; }
.loader__msg::after { content: '…'; animation: dots 1.4s steps(4) infinite; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } to { width: 1.2em; } }
.loader__brand {
  align-self: center;
  font-size: var(--fs-mega);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.065em;
}
.loader__brand .line { display: block; overflow: hidden; padding: .04em .08em .12em; margin: -.04em -.08em -.12em; }
.loader__brand sup { display: inline-block; font-size: .25em; vertical-align: top; position: relative; top: .5em; margin-left: .1em; color: var(--accent); opacity: 0; transform: scale(0) rotate(-90deg); }
.loader__brand.is-in sup { opacity: 1; transform: none; transition: opacity .6s, transform 1s var(--ease-back) .7s; }
.loader.is-out .loader__brand sup { opacity: 0; transition: opacity .3s; }
.loader__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.loader__note { opacity: .6; }
.loader__count {
  font-size: clamp(4rem, 15vw, 14rem);
  font-weight: 300;
  line-height: .78;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.loader__count span { display: block; transition: transform .8s var(--ease-io); }
.loader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.loader__bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.loader.is-out .loader__count span { transform: translateY(-110%); }
.loader.is-out .loader__brand .sc { transform: translateY(-115%) rotate(-6deg); transition: transform .8s var(--ease-io) calc(var(--ci) * 20ms); }
.loader.is-out .loader__top, .loader.is-out .loader__note { opacity: 0; transition: opacity .4s; }

/* ---------- 07. Cursor ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: opacity .3s;
}
.is-touch .cursor { display: none; }
.cursor__ball {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  transition: transform .5s var(--ease-out), width .35s var(--ease-out), height .35s var(--ease-out),
    margin .35s var(--ease-out), border-radius .35s, background-color .35s;
}
.cursor.is-link .cursor__ball { transform: scale(3.6); }
.cursor.is-label { mix-blend-mode: normal; }
.cursor.is-label .cursor__ball { transform: scale(7.6); background: var(--accent); }
.cursor.is-text .cursor__ball { width: 3px; height: 32px; margin: -16px 0 0 -1.5px; border-radius: 2px; }
.cursor.is-down .cursor__ball { transform: scale(.7); }
.cursor.is-link.is-down .cursor__ball { transform: scale(3); }
.cursor.is-label.is-down .cursor__ball { transform: scale(6.8); }
.cursor.is-hidden { opacity: 0; }
.cursor__label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #121211;
  white-space: nowrap;
  transition: opacity .3s, transform .5s var(--ease-out);
}
.cursor.is-label .cursor__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- 08. Transición de página ---------- */
.pt { position: fixed; inset: 0; z-index: 9400; pointer-events: none; }
.pt.is-active { pointer-events: all; }
.pt__layer { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.pt__layer--1 { background: var(--accent); }
.pt__layer--2 {
  background: #121211;
  color: #EEEAE2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
}
.pt__star { font-size: 1.6rem; color: var(--accent); animation: spin 6s linear infinite; animation-play-state: paused; }
.pt.is-active .pt__star { animation-play-state: running; }
.pt__label {
  display: block;
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1;
  overflow: hidden;
  padding: .02em .06em .14em;
}
.pt__label { max-width: 92vw; text-align: center; text-wrap: balance; }
.pt__label .sw { overflow: hidden; vertical-align: top; padding: .12em .04em .16em; margin: -.12em -.04em -.16em; }
.pt__label .sc { transform: translateY(110%); }

/* ---------- 09. Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: transform .9s var(--ease-out);
}
.header > * { pointer-events: auto; }
body[data-theme='accent'] .header,
body[data-theme='project'] .header { mix-blend-mode: normal; color: var(--fg); }
.header.is-hidden { transform: translateY(-110%); }

.logo { display: inline-flex; align-items: center; gap: .55rem; justify-self: start; font-weight: 600; font-size: 1.15rem; letter-spacing: -.03em; }
/* Ícono en una caja cuadrada exacta: gira sobre su propio centro (sin bambolearse) */
.logo__mark { display: grid; place-items: center; width: 1em; height: 1em; font-size: 1.25rem; line-height: 0; will-change: transform; }
.logo__mark .ico-star { display: block; vertical-align: 0; }
/* Misma altura que el efecto "roll" (1.2em): así el centro de la caja es el centro de las letras */
.logo__word { line-height: 1.2; }

.roll { display: inline-flex; overflow: hidden; line-height: 1.2; height: 1.2em; vertical-align: top; }
.rc {
  display: inline-block;
  text-shadow: 0 1.2em currentColor;
  transition: transform .65s var(--ease-out) calc(var(--ci) * 16ms);
}
a:hover .rc, button:hover .rc, [data-roll]:hover .rc { transform: translateY(-1.2em); }

.nav { display: flex; gap: clamp(1.2rem, 2.8vw, 3rem); font-size: 1rem; font-weight: 500; }
.nav a { position: relative; display: inline-flex; align-items: flex-start; gap: .2rem; }
.nav a sup { font-size: .58rem; line-height: 1; margin-top: .1rem; opacity: .7; }
.nav a::before {
  content: '';
  position: absolute;
  left: -.9rem;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform .5s var(--ease-back);
}
.nav a.is-active::before { transform: scale(1); }

.header__right { justify-self: end; display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.6rem); }
.header__clock { opacity: .75; font-variant-numeric: tabular-nums; }

.theme-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid;
  place-items: center;
}
.theme-btn i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  border: 1.5px solid currentColor;
  transition: transform .9s var(--ease-out);
}
html.is-night .theme-btn i { transform: rotate(180deg); }

/* Idioma ES / EN: el activo se ve sólido */
.lang-btn {
  height: 34px;
  padding: 0 .8rem;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.lang-btn__in { display: inline-flex; align-items: center; gap: .35em; }
.lang-btn b, .lang-btn i { font-weight: 500; font-style: normal; opacity: .38; transition: opacity .4s var(--ease-out); }
.lang-btn:hover b { opacity: .7; }
html[lang='es'] .lang-btn b[lang='es'],
html[lang='en'] .lang-btn b[lang='en'] { opacity: 1; }

.menu-btn { display: inline-flex; align-items: center; gap: .8rem; font-weight: 500; }
.menu-btn__labels { display: inline-flex; flex-direction: column; height: 1.25em; overflow: hidden; line-height: 1.25; }
.menu-btn__labels span { transition: transform .7s var(--ease-out); }
.menu-open .menu-btn__labels span { transform: translateY(-100%); }
.menu-btn__icon { position: relative; width: 26px; height: 12px; display: block; }
.menu-btn__icon i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.6px;
  background: currentColor;
  transition: transform .7s var(--ease-out), top .7s var(--ease-out);
}
.menu-btn__icon i:first-child { top: 1px; }
.menu-btn__icon i:last-child { top: 9px; }
.menu-btn:hover .menu-btn__icon i:first-child { transform: scaleX(.6); transform-origin: right; }
.menu-open .menu-btn__icon i:first-child { top: 5px; transform: rotate(45deg); }
.menu-open .menu-btn__icon i:last-child { top: 5px; transform: rotate(-45deg); }

/* ---------- 10. Menú overlay ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: #121211;
  color: #EEEAE2;
  clip-path: circle(0px at var(--ox, 95%) var(--oy, 4%));
  visibility: hidden;
  overflow-y: auto;
  transition: clip-path 1.1s var(--ease-io), visibility 0s linear 1.1s;
}
.menu-open .menu {
  clip-path: circle(150vmax at var(--ox, 95%) var(--oy, 4%));
  visibility: visible;
  transition: clip-path 1.1s var(--ease-io), visibility 0s;
}
.menu.no-anim, .menu.no-anim * { transition: none !important; }
.menu__inner {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 2rem var(--gutter);
  padding: calc(var(--header-h) + 3vh) var(--gutter) var(--gutter);
}
.menu__nav { align-self: center; }
.menu__item { overflow: hidden; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: clamp(.8rem, 2vw, 2rem);
  font-size: clamp(3rem, 8.2vw, 8rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.055em;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out), opacity .5s;
}
.menu-open .menu__link { transform: none; transition: transform 1.1s var(--ease-out) calc(.35s + var(--i) * 70ms), opacity .5s; }
.menu__num { color: var(--accent); min-width: 2.4em; }
.menu__label { transition: transform .7s var(--ease-out), font-style .3s; }
.menu__arrow { font-size: .5em; opacity: 0; transform: translateX(-1em); transition: .6s var(--ease-out); color: var(--accent); }
.menu__list:hover .menu__link { opacity: .28; }
.menu__list .menu__link:hover { opacity: 1; }
.menu__link:hover .menu__label { transform: translateX(.2em); }
.menu__link:hover .menu__arrow { opacity: 1; transform: none; }
.menu__link.is-active .menu__label::after { content: ''; display: inline-block; width: .35em; height: .33em; margin-left: .25em; vertical-align: super; background: var(--accent); -webkit-mask: var(--ico-star) center / 100% 100% no-repeat; mask: var(--ico-star) center / 100% 100% no-repeat; }

.menu__preview {
  position: relative;
  align-self: center;
  justify-self: end;
  width: min(100%, 440px);
  aspect-ratio: var(--cover-ratio);
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  transform: scale(.85) rotate(-4deg);
  transition: opacity .6s, transform 1.2s var(--ease-out);
}
.menu-open .menu__preview { opacity: 1; transform: none; transition-delay: .5s; }
.menu__preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity .7s var(--ease-out), transform 1.2s var(--ease-out);
}
.menu__preview img.is-active { opacity: 1; transform: none; }

.menu__foot {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(238, 234, 226, .16);
  opacity: 0;
  transform: translateY(20px);
  transition: .6s var(--ease-out);
}
.menu-open .menu__foot { opacity: 1; transform: none; transition: 1s var(--ease-out) .7s; }
.menu__foot .label { color: rgba(238, 234, 226, .5); margin-bottom: .7rem; }
.menu__time { font-size: clamp(1.6rem, 2.4vw, 2.4rem); font-weight: 300; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.menu__social { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: 1.05rem; }
.menu__langs { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: 1.05rem; }
.menu__langs button { opacity: .45; transition: opacity .4s var(--ease-out); }
.menu__langs button:hover, .menu__langs button[aria-pressed='true'] { opacity: 1; }

/* Ícono estrella (assets/img/icono.svg) — toma el color del texto */
.ico-star {
  display: inline-block;
  width: 1em;
  height: .93em;
  vertical-align: -.08em;
  fill: currentColor;
  overflow: visible;
}

/* ---------- 11. Botones & enlaces ---------- */
.btn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem 1.7rem;
  border: 1px solid var(--fg);
  border-radius: 99px;
  font-size: 1.02rem;
  font-weight: 500;
  overflow: hidden;
  isolation: isolate;
  transition: color .5s var(--ease-out), border-color .9s;
}
.btn-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  border-radius: 50% 50% 0 0;
  transform: translateY(101%);
  transition: transform .7s var(--ease-out), border-radius .7s var(--ease-out);
}
.btn-pill:hover { color: var(--bg); }
.btn-pill:hover::before { transform: none; border-radius: 0; }
.btn-pill .arrow { display: inline-block; transition: transform .6s var(--ease-out); }
.btn-pill:hover .arrow { transform: translateX(4px) rotate(-45deg); }
.btn-pill > span { display: inline-block; }
.btn-pill sup { font-size: .6rem; margin-left: .2rem; }
.btn-pill--big { padding: 1.5rem 2.6rem; font-size: clamp(1.05rem, 1.3vw, 1.3rem); }

.btn-link { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.btn-link:hover { color: var(--accent); }

/* ---------- 12. Media genérica ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--soft); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* Portada 4:5 — imagen principal + imagen opcional que aparece al pasar el mouse */
.cover { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover__main { transition: scale 1.2s var(--ease-out); }
.cover__hover {
  clip-path: inset(100% 0 0 0);
  scale: 1.18;
  transition: clip-path .9s var(--ease-io), scale 1.4s var(--ease-out);
}
a:hover .cover__hover, a:focus-visible .cover__hover { clip-path: inset(0 0 0 0); scale: 1; }
a:hover .cover:not(.has-hover) .cover__main { scale: 1.07; }
a:hover .cover.has-hover .cover__main { scale: 1.12; }

/* ==========================================================================
   INICIO
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--header-h) + 2rem) var(--gutter) var(--gutter);
  overflow: hidden;
}
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__gl.is-fallback {
  background:
    radial-gradient(40% 50% at 70% 30%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 70%),
    repeating-radial-gradient(circle at 70% 30%, transparent 0 22px, color-mix(in srgb, var(--ink) 12%, transparent) 22px 23px);
}
.hero__inner { position: relative; z-index: 1; will-change: transform, opacity; }
.hero__top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.hero__title {
  font-size: var(--fs-mega);
  font-weight: 500;
  line-height: .86;
  letter-spacing: -.066em;
}
.hero__title em { letter-spacing: -.025em; padding-right: .04em; }
.line--right { text-align: right; }
.hero__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--gutter);
  margin-top: clamp(1.8rem, 3.5vw, 3.5rem);
}
.hero__lede { font-size: var(--fs-lead); line-height: 1.25; letter-spacing: -.02em; max-width: 30ch; }
.hero__hint { justify-self: end; text-align: right; opacity: .7; }
.hero__scroll { display: inline-flex; flex-direction: column; align-items: center; gap: .7rem; }
.hero__scroll i { position: relative; width: 1px; height: 64px; background: color-mix(in srgb, var(--fg) 25%, transparent); overflow: hidden; }
.hero__scroll i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fg);
  animation: scrollLine 2s var(--ease-io) infinite;
}
@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ---------- Intro ---------- */
.intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding-block: clamp(6rem, 14vw, 15rem);
}
.intro > .label { grid-column: 1 / span 3; padding-top: 1em; }
.intro__text {
  grid-column: 4 / -1;
  font-size: clamp(1.75rem, 3.7vw, 4.1rem);
  font-weight: 450;
  line-height: 1.06;
  letter-spacing: -.04em;
}
.intro__text em { letter-spacing: -.015em; }
.hw { transition: opacity .15s linear; }
.pill {
  display: inline-block;
  width: 1.9em;
  height: .88em;
  border-radius: 1em;
  overflow: hidden;
  vertical-align: middle;
  margin: 0 .08em;
  transform: translateY(-.06em);
  background: var(--soft);
}
.pill img { width: 100%; height: 100%; object-fit: cover; }
.pill--star {
  width: .88em;
  display: inline-grid;
  place-items: center;
  background: var(--accent);
  color: #121211;
  font-size: 1em;
  line-height: 1;
}
.pill--star .ico-star { width: .6em; height: .56em; vertical-align: 0; }
.intro__foot {
  grid-column: 4 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(2.5rem, 5vw, 5rem);
}
.intro__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 2rem; }
.intro__small { max-width: 34ch; color: var(--muted); }

/* ---------- Marquesina ---------- */
.marquee {
  display: block;
  overflow: hidden;
  padding-block: clamp(1rem, 2vw, 2rem);
  border-block: 1px solid var(--line);
  transition: border-color .9s;
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: .3em;
  padding-right: .3em;
  font-size: clamp(3rem, 9vw, 10rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.055em;
  white-space: nowrap;
  transform: skewX(calc(var(--skew, 0deg) * -2));
}
.marquee__item em { letter-spacing: -.02em; }
.marquee__star { display: inline-block; font-size: .5em; color: var(--accent); animation: spin 18s linear infinite; }
.marquee--outline .marquee__item span:not(.marquee__star) { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.marquee--cta { border-bottom: 0; margin-top: clamp(4rem, 8vw, 8rem); }
.marquee--cta:hover .marquee__item { color: var(--accent); }
.marquee--cta .marquee__item { transition: color .5s; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Proyectos destacados ---------- */
.featured { padding-block: clamp(5rem, 9vw, 10rem) clamp(6rem, 10vw, 12rem); }
.featured__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(4rem, 8vw, 9rem);
}
.card { display: block; }
.card--1 { grid-column: 1 / span 6; }
.card--2 { grid-column: 8 / span 4; margin-top: clamp(6rem, 20vw, 22rem); }
.card--3 { grid-column: 2 / span 4; }
.card--4 { grid-column: 7 / span 5; margin-top: clamp(4rem, 12vw, 14rem); }
.card__media {
  aspect-ratio: var(--cover-ratio);
  clip-path: inset(100% 0 0 0 round var(--radius));
  transform: skewY(var(--skew, 0deg));
  transition: clip-path 1.5s var(--ease-io);
}
.card.is-in .card__media { clip-path: inset(0 0 0 0 round var(--radius)); }
.card__media .cover { scale: 1.3; transition: scale 1.8s var(--ease-out); }
.card.is-in .card__media .cover { scale: 1; }
.card__info {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1.1rem;
  opacity: 0;
  transform: translateY(20px);
}
.card.is-in .card__info { opacity: 1; transform: none; transition: 1.2s var(--ease-out) .5s; }
.card__idx { color: var(--muted); }
.card__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; }
.card__meta { color: var(--muted); text-align: right; }
.featured__more { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; margin-top: clamp(5rem, 9vw, 10rem); }
.featured__alt { font-size: clamp(1rem, 1.2vw, 1.15rem); color: var(--muted); }
.featured__alt a { color: var(--fg); }

/* ---------- Servicios (horizontal) ---------- */
.hscroll { position: relative; }
.hscroll__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hscroll__head {
  position: absolute;
  top: calc(var(--header-h) + .5rem);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.hscroll__bar { position: relative; flex: 1; height: 1px; background: var(--line); }
.hscroll__bar i { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(0); }
.hscroll__count { font-variant-numeric: tabular-nums; }
.hscroll__count b { font-weight: 500; color: var(--accent); }
.hscroll__track {
  display: flex;
  align-items: stretch;
  gap: var(--gutter);
  width: max-content;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  will-change: transform;
}
.hscroll__intro {
  width: min(40vw, 620px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 4vw;
}
.hscroll__title { font-size: var(--fs-h1); font-weight: 500; line-height: .9; letter-spacing: -.06em; }
.hscroll__lede { margin-top: 2rem; max-width: 34ch; font-size: var(--fs-lead); line-height: 1.3; color: var(--muted); }
.hscroll__hint { margin-top: 2rem; color: var(--accent); }
.hscroll__end { width: min(34vw, 460px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2rem; padding-left: 3vw; }
.hscroll__end-text { font-size: var(--fs-h2); line-height: 1; letter-spacing: -.045em; font-weight: 500; }

.service {
  position: relative;
  width: clamp(290px, 29vw, 470px);
  height: min(66vh, 640px);
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  background: var(--soft);
  overflow: hidden;
  isolation: isolate;
  transition: color .6s var(--ease-out), border-color .6s;
}
.service::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  clip-path: circle(0% at 50% 100%);
  transition: clip-path .9s var(--ease-io);
}
.service:hover { color: #121211; border-color: transparent; }
.service:hover::before { clip-path: circle(150% at 50% 100%); }
.service__top { display: flex; justify-content: space-between; align-items: flex-start; }
.service__num { font-size: clamp(3rem, 5vw, 5.6rem); font-weight: 300; line-height: .8; letter-spacing: -.06em; }
.service__shape { flex: 1; min-height: 110px; margin: 1rem 0; }
.service__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.service__text { margin: .9rem 0 1.2rem; font-size: .98rem; line-height: 1.45; opacity: .78; }
.service__list li { padding: .5rem 0; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 18%, transparent); }
.service__extras { margin-top: 1rem; }
.service__extras p { margin-bottom: .55rem; opacity: .6; }
.service__extras ul { display: flex; flex-wrap: wrap; gap: .35rem; }
.service__extras li {
  padding: .32rem .7rem;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 99px;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.service:has(.service__extras) .service__shape { min-height: 56px; }
.service:has(.service__extras) .service__text { margin: .6rem 0 .8rem; }
.service:has(.service__extras) .service__list li { padding: .34rem 0; }
/* Las formas se escalan al alto disponible: nunca se enciman con el título */
.service__shape { container-type: size; }
.shape i { max-width: 92cqh; }

/* Formas CSS animadas */
.shape { display: grid; place-items: center; }
.shape i { grid-area: 1 / 1; display: block; }
.shape--1 i { width: 34%; aspect-ratio: 1; border: 1.5px solid currentColor; border-radius: 50%; animation: ripple 3.6s var(--ease-out) infinite; }
.shape--1 i:nth-child(2) { animation-delay: -1.2s; }
.shape--1 i:nth-child(3) { animation-delay: -2.4s; }
@keyframes ripple { 0% { transform: scale(.15); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
.shape--2 i { width: 40%; aspect-ratio: 1; border: 1.5px solid currentColor; animation: spin 14s linear infinite; }
.shape--2 i:nth-child(2) { width: 28%; animation-duration: 9s; animation-direction: reverse; border-radius: 30%; }
.shape--2 i:nth-child(3) { width: 12%; background: currentColor; border-radius: 50%; animation: pulse 2.4s var(--ease-io) infinite; }
@keyframes pulse { 50% { transform: scale(1.6); } }
.shape--3 i { width: 62%; height: 16%; border-radius: 99px; border: 1.5px solid currentColor; animation: slideBar 3.2s var(--ease-io) infinite alternate; }
.shape--3 i:nth-child(1) { transform: translate(-12%, -130%); animation-delay: -.6s; }
.shape--3 i:nth-child(2) { background: currentColor; animation-delay: -1.2s; }
.shape--3 i:nth-child(3) { transform: translate(8%, 130%); animation-delay: -1.8s; }
@keyframes slideBar { to { translate: 14% 0; } }
.shape--4 i:nth-child(1) { width: 12%; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.shape--4 i:nth-child(2), .shape--4 i:nth-child(3) {
  position: relative;
  width: 56%;
  aspect-ratio: 1;
  border: 1.5px dashed currentColor;
  border-radius: 50%;
  animation: spin 7s linear infinite;
}
.shape--4 i:nth-child(3) { width: 32%; border-style: solid; animation-duration: 4s; animation-direction: reverse; }
.shape--4 i:nth-child(2)::after, .shape--4 i:nth-child(3)::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: currentColor;
}
.shape--5 i:nth-child(1) { width: 46%; aspect-ratio: 1; background: currentColor; animation: morph 6s var(--ease-io) infinite; }
.shape--5 i:nth-child(2) { width: 64%; aspect-ratio: 1; border: 1.5px solid currentColor; animation: morph 7s var(--ease-io) infinite reverse; }
.shape--5 i:nth-child(3) { display: none; }
@keyframes morph {
  0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: rotate(0); }
  33% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; transform: rotate(60deg); }
  66% { border-radius: 30% 70% 38% 62% / 64% 38% 62% 36%; transform: rotate(-40deg); }
}

/* ---------- Cifras (resultados de proyecto) ---------- */
.stat { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.stat__num {
  display: flex;
  align-items: flex-start;
  font-size: clamp(3.4rem, 8vw, 8.6rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.065em;
  font-variant-numeric: tabular-nums;
}
.stat__num sup { font-size: .38em; margin-left: .08em; margin-top: .1em; color: var(--accent); letter-spacing: 0; font-weight: 400; }
.stat p { margin-top: 1rem; color: var(--muted); }

/* ---------- Archivo arrastrable ---------- */
.archive { padding-block: clamp(6rem, 10vw, 12rem); overflow: hidden; }
.drag { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.drag__track { display: flex; gap: var(--gutter); width: max-content; padding-inline: var(--gutter); will-change: transform; }
.arch {
  display: block;
  width: clamp(240px, 24vw, 400px);
  transform: skewX(var(--dskew, 0deg));
  -webkit-user-drag: none;
}
.arch img { -webkit-user-drag: none; pointer-events: none; }
.arch__media {
  aspect-ratio: var(--cover-ratio);
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in srgb, #121211 8%, transparent);
  transition: border-radius .7s var(--ease-out);
}
.arch:hover .arch__media { border-radius: calc(var(--radius) * 3); }
.arch__info { display: flex; align-items: baseline; gap: .8rem; margin-top: 1rem; }
.arch__title { flex: 1; font-size: clamp(1.3rem, 1.9vw, 2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; }
.arch__idx, .arch__year, .arch__cats { opacity: .6; }
.arch__cats { margin-top: .35rem; }
.drag.is-dragging .arch { pointer-events: none; }
.drag__progress { display: flex; align-items: center; gap: 2rem; margin-top: 3rem; }
.drag__line { flex: 1; height: 1px; background: var(--line); }
.drag__line i { display: block; height: 100%; background: var(--fg); transform-origin: left; transform: scaleX(.18); }

/* ---------- CTA ---------- */
.cta {
  position: relative;
  padding: clamp(6rem, 12vw, 14rem) var(--gutter) clamp(7rem, 14vw, 16rem);
  text-align: center;
}
.cta > .label { margin-bottom: 2rem; }
.cta__title { font-size: var(--fs-h1); font-weight: 500; line-height: .9; letter-spacing: -.062em; }
.cta__btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: clamp(160px, 17vw, 260px);
  aspect-ratio: 1;
  margin-top: clamp(2rem, 4vw, 4rem);
  border-radius: 50%;
  background: var(--accent);
  color: #121211;
  transition: background-color .5s;
}
.cta__btn:hover { background: #121211; color: #EEEAE2; }
html.is-night .cta__btn:hover { background: #EEEAE2; color: #121211; }
.cta__ring { position: absolute; inset: 7%; width: 86%; height: 86%; animation: spin 16s linear infinite; }
.cta__ring text { font-family: var(--mono); font-size: 13.5px; letter-spacing: .1em; fill: currentColor; }
.cta__ring use { fill: currentColor; }
.cta__label { display: flex; flex-direction: column; align-items: center; font-size: clamp(1rem, 1.3vw, 1.3rem); font-weight: 600; line-height: 1.2; }
.cta__label i { font-style: normal; transition: transform .6s var(--ease-out); }
.cta__btn:hover .cta__label i { transform: rotate(-45deg); }
.cta__alt { margin-top: clamp(1.6rem, 3vw, 2.6rem); color: var(--muted); }
.cta__alt a { color: var(--fg); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer-wrap {
  position: relative;
  height: 100vh;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 3vh) var(--gutter) var(--gutter);
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}
.footer-wrap.is-static { height: auto; clip-path: none; }
.footer-wrap.is-static .footer { position: relative; }
.footer__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.footer__gl.is-fallback { background: repeating-radial-gradient(circle at 30% 70%, transparent 0 26px, rgba(238, 234, 226, .08) 26px 27px); }
.footer > *:not(canvas) { position: relative; }
.footer__top {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr 1.6fr;
  gap: var(--gutter);
}
.footer .label { margin-bottom: 1rem; }
.footer__big {
  display: block;
  font-size: clamp(2.2rem, 4.8vw, 5.4rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.055em;
  transition: color .5s;
}
.footer__big:hover { color: var(--accent); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; font-size: 1.02rem; }
.footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.footer__col a:hover { color: var(--accent); }
.footer__time { font-size: clamp(2.4rem, 4vw, 4.2rem); font-weight: 300; line-height: .9; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.footer__credit { margin-top: 1rem; max-width: 26ch; color: var(--muted); font-size: .95rem; }
.footer__brand {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 2rem;
  font-size: clamp(4rem, 20.5vw, 26rem);
  font-weight: 500;
  line-height: .74;
  letter-spacing: -.06em;
  white-space: nowrap;
  user-select: none;
}
.footer__brand span { display: inline-block; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.footer__bottom button:hover { color: var(--fg); }
.footer__clocks { font-variant-numeric: tabular-nums; }

@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ==========================================================================
   COMPONENTES GLOBALES
   ========================================================================== */
.reveal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 800;
  width: clamp(220px, 19vw, 340px);
  aspect-ratio: var(--cover-ratio);
  pointer-events: none;
}
.reveal__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  transform: scale(.3);
  opacity: 0;
  transition: transform .7s var(--ease-out), opacity .35s;
}
.reveal.is-visible .reveal__inner { transform: scale(1); opacity: 1; }
.reveal__inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 700;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #121211;
  color: #EEEAE2;
  box-shadow: 0 0 0 1px rgba(238, 234, 226, .14);
  opacity: 0;
  transform: scale(.5) translateY(20px);
  pointer-events: none;
  transition: opacity .5s, transform .7s var(--ease-back);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.to-top circle { fill: none; stroke-width: 2; }
.to-top__track { stroke: rgba(238, 234, 226, .15); }
.to-top__prog { stroke: var(--accent); stroke-linecap: round; }
.to-top span { font-size: 1.1rem; transition: transform .5s var(--ease-out); }
.to-top:hover span { transform: translateY(-4px); }
.menu-open .to-top, .footer-in .to-top { opacity: 0; transform: scale(.5); pointer-events: none; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--gutter) + 6px);
  z-index: 9600;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: .95rem 1.4rem;
  border-radius: 99px;
  background: var(--accent);
  color: #121211;
  font-size: .78rem;
  transform: translate(-50%, calc(100% + var(--gutter) + 20px));
  visibility: hidden;
  transition: transform .7s var(--ease-back), visibility 0s linear .7s;
  pointer-events: none;
}
.toast.is-visible { transform: translate(-50%, 0); visibility: visible; transition: transform .7s var(--ease-back), visibility 0s; }

.confetti { position: fixed; inset: 0; z-index: 9700; width: 100vw; height: 100vh; pointer-events: none; }

/* Aviso de idioma: al entrar, en el otro idioma; se va solo con la barra (7 s) o con el tache */
.lang-note {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 850;
  width: min(360px, calc(100vw - 2 * var(--gutter)));
  padding: 1rem 1.1rem 1.2rem;
  border-radius: var(--radius);
  background: #121211;
  color: #EEEAE2;
  box-shadow: 0 0 0 1px rgba(238, 234, 226, .14), 0 22px 50px -20px rgba(0, 0, 0, .5);
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px) scale(.96);
  transform-origin: left bottom;
  transition: opacity .5s var(--ease-out), transform .8s var(--ease-back);
}
.lang-note.is-visible { opacity: 1; transform: none; }
.lang-note__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.lang-note__label { display: inline-flex; align-items: center; gap: .55em; color: rgba(238, 234, 226, .55); }
.lang-note__label .ico-star { color: var(--accent); font-size: 1.15em; }
.lang-note__close {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(238, 234, 226, .22);
  font-size: .68rem;
  transition: background .4s, color .4s, border-color .4s, transform .6s var(--ease-out);
}
.lang-note__close:hover { background: #EEEAE2; color: #121211; border-color: #EEEAE2; transform: rotate(90deg); }
.lang-note__text { margin-bottom: .95rem; font-size: 1.02rem; line-height: 1.35; letter-spacing: -.01em; }
.lang-note__action {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.05rem;
  border-radius: 99px;
  border: 1px solid rgba(238, 234, 226, .4);
  font-size: .88rem;
  font-weight: 500;
  transition: background .4s, border-color .4s, color .4s;
}
.lang-note__action span:last-child { transition: transform .5s var(--ease-out); }
.lang-note__action:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.lang-note__action:hover span:last-child { transform: translateX(3px); }
.lang-note__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(238, 234, 226, .1); }
.lang-note__bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }

/* ==========================================================================
   TRABAJO
   ========================================================================== */
.work-hero { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 9rem)); padding-bottom: clamp(2rem, 4vw, 4rem); }
.work-hero .label { margin-bottom: 1.5rem; }
.work-hero__title { font-size: calc(var(--fs-mega) * 1.2); font-weight: 500; line-height: .86; letter-spacing: -.07em; }
.work-hero__count { font-size: .13em; letter-spacing: 0; vertical-align: top; position: relative; top: .7em; margin-left: .4em; color: var(--accent); }
.work-hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 4rem); }
.work-hero__lede { max-width: 30ch; font-size: var(--fs-lead); line-height: 1.25; letter-spacing: -.02em; }
.work-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter {
  padding: .65rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: .95rem;
  transition: background-color .4s var(--ease-out), color .4s, border-color .4s;
}
.filter sup { font-family: var(--mono); font-size: .58rem; margin-left: .3rem; opacity: .7; }
.filter:hover { border-color: var(--fg); }
.filter.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.view-toggle { position: relative; display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 99px; }
.view-toggle::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 99px;
  background: var(--accent);
  transition: transform .7s var(--ease-out);
}
.view-toggle[data-view-toggle='grid']::before { transform: translateX(100%); }
.view-toggle button { position: relative; min-width: 5.4rem; padding: .55rem 1rem; text-align: center; font-size: .95rem; transition: color .4s; }
.view-toggle button.is-active { color: #121211; }

.work { --cols: 4rem 2fr 1.1fr 7rem 2.5rem; padding-bottom: 2rem; }
.work__head {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.work:has([data-view='grid']) .work__head { display: none; }
.work-item { position: relative; isolation: isolate; }
[data-view='list'] .work-item {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 1rem;
  align-items: center;
  padding: clamp(1.4rem, 2.4vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
  transition: color .5s var(--ease-out);
}
[data-view='list'] .work-item::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--gutter) * -1);
  z-index: -1;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .7s var(--ease-out);
}
[data-view='list'] .work-item:hover { color: var(--bg); }
[data-view='list'] .work-item:hover::before { transform: scaleY(1); transform-origin: 50% 100%; }
.work-item__title { font-size: clamp(1.8rem, 3.6vw, 4.2rem); font-weight: 500; line-height: 1; letter-spacing: -.055em; text-wrap: balance; transition: transform .7s var(--ease-out); }
[data-view='list'] .work-item:hover .work-item__title { transform: translateX(1.2rem); }
.work-item__arrow { justify-self: end; font-size: 1.6rem; transition: transform .6s var(--ease-out); }
.work-item:hover .work-item__arrow { transform: rotate(45deg); }
[data-view='list'] .work-item__media { display: none; }

[data-view='grid'] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(3rem, 5vw, 5rem) var(--gutter);
  padding-top: 1rem;
}
[data-view='grid'] .work-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'media media' 'title year' 'cats cats';
  row-gap: .35rem;
}
[data-view='grid'] .work-item__media {
  grid-area: media;
  display: block;
  aspect-ratio: var(--cover-ratio);
  margin-bottom: .9rem;
  border-radius: var(--radius);
  overflow: hidden;
}
[data-view='grid'] .work-item__title { grid-area: title; font-size: var(--fs-h3); }
[data-view='grid'] .work-item__year { grid-area: year; align-self: center; }
[data-view='grid'] .work-item__cats { grid-area: cats; color: var(--muted); }
[data-view='grid'] .work-item__idx,
[data-view='grid'] .work-item__arrow { display: none; }
[data-view='grid'] .work-item:nth-child(3n + 2) { margin-top: clamp(0rem, 6vw, 7rem); }

[data-in].work-item { opacity: 0; transform: translateY(40px); }
[data-in].work-item.is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out) var(--d, 0ms), transform 1.2s var(--ease-out) var(--d, 0ms); }

/* ==========================================================================
   PROYECTO
   ========================================================================== */
.p-hero { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 7rem)); padding-bottom: clamp(3rem, 6vw, 6rem); }
.p-hero__crumb { display: flex; gap: .7rem; color: var(--muted); margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.p-hero__crumb a:hover { color: var(--fg); }
.p-hero__title { font-size: calc(var(--fs-mega) * 1.12); font-weight: 500; line-height: .86; letter-spacing: -.07em; text-wrap: balance; }
.p-hero__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: 3rem;
  margin-top: clamp(2.5rem, 5vw, 5rem);
}
.p-hero__tag { grid-column: 1 / span 6; font-size: var(--fs-h3); font-weight: 450; line-height: 1.08; letter-spacing: -.04em; }
.p-hero__tag p + p { margin-top: .9em; }
.p-hero__tag--long { font-size: var(--fs-lead); font-weight: 400; line-height: 1.32; letter-spacing: -.018em; max-width: 46ch; }
.p-hero__meta { grid-column: 8 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem var(--gutter); align-content: start; }
.p-hero__meta div { border-top: 1px solid var(--line); padding-top: .9rem; }
.p-hero__meta dt { color: var(--muted); margin-bottom: .5rem; }
.p-hero__meta dd { font-size: 1.05rem; line-height: 1.4; }

.p-cover { position: relative; height: 190vh; }
.p-cover__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.p-cover__media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: var(--soft); clip-path: inset(14% 34% round 22px); }
.p-cover[data-fit] .p-cover__media { background: transparent; }
.p-cover[data-fit] .p-cover__cap { display: none; }
.p-cover__spread { display: flex; width: 100%; height: 100%; will-change: transform; }
.p-cover__media .p-cover__spread img { flex: 1 1 0; min-width: 0; width: auto; height: 100%; object-fit: cover; }
.p-cover__spread img + img { margin-left: -1px; }
.p-cover__media img, .p-cover__media video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.p-cover__cap { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); color: var(--muted); }

.p-intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding-block: clamp(5rem, 11vw, 13rem);
}
.p-intro > .label { grid-column: 1 / span 3; }
.p-intro__cols { grid-column: 4 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 5rem); }
.p-intro__h { color: var(--accent); margin-bottom: 1.2rem; }
.p-intro__cols p { font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -.018em; }

.p-gallery { display: flex; flex-direction: column; gap: var(--gutter); padding-bottom: clamp(5rem, 10vw, 12rem); }
.g-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
.g--offset { margin-top: clamp(4rem, 14vw, 16rem); }
.g__cap { margin-top: .9rem; color: var(--muted); }

/* ---------- Bloques del caso (data.js → blocks) ---------- */
.p-blocks { padding-block: clamp(4rem, 8vw, 8rem) clamp(5rem, 10vw, 12rem); }
.p-blocks > * + * { margin-top: var(--gutter); }
.p-blocks > .is-head,
.p-blocks > .b-band,
.p-blocks > .b-band + * { margin-top: clamp(5rem, 10vw, 11rem); }
.p-blocks > :first-child { margin-top: 0; }
/* Un carrusel continuo justo después de posts: sin margen extra (su escenario ya deja aire arriba) */
.p-blocks > .b-wrap + .b-pano { margin-top: 0; }
.p-blocks > .b-pano + .b-wrap { margin-top: clamp(1.5rem, 3vw, 3rem); }
.b-head { margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.b-head__main { grid-column: 4 / span 8; }
.b-head__text { margin-top: 1.4rem; max-width: 44ch; font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -.02em; color: var(--muted); }
.b-band .label, .b-band .b-head__text { color: inherit; opacity: .68; }

/* Imagen completa: el marco toma la proporción real y nunca recorta */
.b-fig { margin: 0; }
.b-fig__frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--b-bg, transparent); }
.b-fig__frame img, .b-fig__frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.b-fig__cap { margin-top: .9rem; color: var(--muted); }
.b-wrap > .b-fig .b-fig__frame { width: min(100%, calc(86svh * var(--ar, 10))); margin-inline: auto; }
.b-fig.is-missing .b-fig__frame, .b-fig__frame.is-missing { background: var(--soft); outline: 1px dashed var(--line); }

/* Dos imágenes con la misma altura: el ancho de cada una depende de su proporción */
.b-pair { display: flex; gap: var(--gutter); align-items: flex-start; }
.b-pair > .b-fig { flex: var(--r) 1 0%; min-width: 0; }

/* Franja de color a todo lo ancho */
.b-bleed { background: var(--band-bg); }
.b-fig--bleed { --radius: 0px; }
.b-fig--bleed .b-fig__frame { max-width: 1920px; margin-inline: auto; }

/* Mazo de tarjetas */
.b-deck {
  background: var(--deck-bg);
  color: var(--deck-fg);
  padding-block: clamp(5rem, 10vw, 10rem);
  overflow: hidden;
  overflow: clip;
  transition: background-color 1s var(--ease-out), color 1s var(--ease-out);
}
.b-deck__inner { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; }
.b-deck__info { grid-column: 1 / span 4; }
.b-deck__title { margin-top: 1.4rem; font-size: var(--fs-h1); font-weight: 500; line-height: .9; letter-spacing: -.06em; }
.b-deck__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.b-deck__count { font-variant-numeric: tabular-nums; }
.b-deck__count b { font-size: 1.7em; font-weight: 500; }
.b-deck__nav { display: flex; gap: .6rem; }
.b-deck__btn {
  width: 56px;
  height: 56px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  transition: background-color .4s, color .4s;
}
.b-deck__btn:hover { background: var(--deck-fg); color: var(--deck-bg); }
.b-deck__hint { margin-top: 1.2rem; opacity: .7; }
.b-deck__stage {
  grid-column: 6 / -1;
  justify-self: center;
  position: relative;
  width: min(100%, clamp(260px, 30vw, 460px));
  aspect-ratio: 4 / 5;
  margin-right: 8%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.b-deck__card {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in srgb, currentColor 10%, transparent);
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .5);
  transform-origin: 50% 100%;
  transform: translate(calc(var(--d) * 9%), calc(var(--d) * -3%)) rotate(calc(var(--d) * 5deg)) scale(calc(1 - var(--d) * .06));
  filter: brightness(calc(1 - var(--d) * .1));
  transition: transform .9s var(--ease-out), filter .9s var(--ease-out), opacity .6s var(--ease-out);
  will-change: transform;
}
.b-deck__card.is-deep { opacity: 0; }
.b-deck__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* Inspector de íconos */
.b-icons { background: var(--ic-bg); color: var(--ic-fg); padding-block: clamp(5rem, 10vw, 10rem); }
.b-icons__layout { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
.b-icons__stage {
  grid-column: 1 / span 4;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  aspect-ratio: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(1.2rem, 2vw, 2rem);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: calc(var(--radius) * 1.4);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--ic-accent) 20%, transparent), transparent 62%);
}
.b-icons__big { display: grid; place-items: center; min-height: 0; color: var(--ic-accent); }
.b-icons__big svg, .b-icons__big img { width: 56%; height: 56%; fill: currentColor; overflow: visible; }
.b-icons__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.b-icons__name { font-size: clamp(1.15rem, 1.7vw, 1.7rem); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; overflow: hidden; }
.b-icons__grid {
  grid-column: 6 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(58px, 6vw, 92px), 1fr));
  gap: clamp(.3rem, .7vw, .7rem);
}
.b-icon {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  transition: background-color .35s, color .35s;
}
.b-icon:hover, .b-icon.is-active { background: color-mix(in srgb, currentColor 9%, transparent); color: var(--ic-accent); }
.b-icon__svg { display: grid; place-items: center; width: 54%; height: 54%; transition: transform .25s var(--ease-out); }
.b-icon__svg svg, .b-icon__svg img { width: 100%; height: 100%; fill: currentColor; overflow: visible; }
.b-icons.is-img .b-icon__svg img, .b-icons.is-img .b-icons__big img { filter: invert(1); }

/* Íconos dentro de arcos */
.b-arches { background: var(--arch-bg); color: var(--arch-fg); padding-block: clamp(5rem, 10vw, 10rem); }
.b-arches__row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 3vw, 3rem) var(--gutter); }
.b-arch { flex: 0 0 calc((100% - 4 * var(--gutter)) / 5); }
.b-arch__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  border-radius: 999px 999px 10px 10px;
  background: var(--arch-fg);
  overflow: hidden;
  isolation: isolate;
}
.b-arch__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Tinte suave del acento: si fuera el acento puro, las partes del ícono de ese color desaparecerían */
  background: color-mix(in srgb, var(--arch-accent) 20%, var(--arch-fg));
  transform: translateY(101%);
  transition: transform .8s var(--ease-io);
}
.b-arch__frame::after {
  content: '';
  position: absolute;
  inset: 7%;
  border: 1.5px solid color-mix(in srgb, var(--arch-bg) 22%, transparent);
  border-radius: 999px 999px 6px 6px;
  pointer-events: none;
  transition: border-color .6s;
}
.b-arch:hover .b-arch__frame::before { transform: none; }
.b-arch:hover .b-arch__frame::after { border-color: var(--arch-accent); }
.b-arch__frame img {
  width: 58%;
  height: 58%;
  object-fit: contain;
  animation: archFloat 6s ease-in-out infinite;
  animation-delay: calc(var(--d, 0ms) * -8);
  transition: transform .8s var(--ease-out);
}
.b-arch:hover .b-arch__frame img { transform: scale(1.1) rotate(-4deg); }
@keyframes archFloat { 50% { translate: 0 -5%; } }
.b-arch__label { display: flex; align-items: baseline; gap: .7rem; margin-top: 1.1rem; font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.2; letter-spacing: -.02em; }
.b-arch__label .mono { opacity: .6; }

/* Antes / después */
.b-compare {
  position: relative;
  width: min(100%, calc(80svh * var(--ar, 1)));
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--soft);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.b-compare__img { position: absolute; top: 0; left: 0; width: 200%; max-width: none; height: 100%; pointer-events: none; }
.b-compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.b-compare__img--after { left: -100%; }
.b-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #121211; pointer-events: none; }
.b-compare__handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #121211;
  color: #EEEAE2;
  font-size: .8rem;
  letter-spacing: -.1em;
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease-back);
}
.b-compare.is-dragging .b-compare__handle span { transform: translate(-50%, -50%) scale(.82); }
.b-compare.is-focus { outline: 2px solid var(--accent); outline-offset: 4px; }
.b-compare__labels { display: flex; justify-content: space-between; width: min(100%, calc(80svh * var(--ar, 1))); margin: 1rem auto 0; color: var(--muted); }

/* Pestañas */
.b-tabs {
  background: var(--tab-bg);
  color: var(--tab-fg);
  padding-block: clamp(5rem, 9vw, 9rem);
  transition: background-color 1s var(--ease-out), color 1s var(--ease-out);
}
.b-tabs__nav { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: var(--gutter); margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.b-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .3rem .8rem;
  text-align: left;
  opacity: .45;
  transition: opacity .5s;
}
.b-tab:hover, .b-tab.is-active { opacity: 1; }
.b-tab__label { font-size: clamp(1.05rem, 2vw, 2rem); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; }
.b-tab__bar { grid-column: 1 / -1; height: 2px; margin-top: .8rem; overflow: hidden; background: color-mix(in srgb, currentColor 18%, transparent); }
.b-tab__bar b { display: block; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; }
.b-tabs__stage { position: relative; width: min(100%, calc(76svh * var(--ar, 1.7778))); margin-inline: auto; }
.b-tabs__panel {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel-bg);
  clip-path: inset(0 0 0 100%);
}
.b-tabs__panel.is-active { z-index: 2; clip-path: inset(0); transition: clip-path 1s var(--ease-io); }
.b-tabs__panel.was-active { z-index: 1; clip-path: inset(0); }
.b-tabs__panel img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.06); transition: transform 1.4s var(--ease-out); }
.b-tabs__panel.is-active img { transform: none; }

/* Letrero SVG animado */
.b-letter { background: var(--lt-bg); color: var(--lt-fg); padding-block: clamp(3rem, 7vw, 7rem) clamp(2rem, 4vw, 4rem); overflow: hidden; overflow: clip; }
.b-letter__stage {
  width: min(calc(100% - 2 * var(--gutter)), calc(76svh * var(--ar, 1.6)));
  margin-inline: auto;
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.b-letter__stage > img { width: 100%; height: 100%; object-fit: cover; }
.b-letter__stage svg { width: 100%; height: 100%; overflow: visible; will-change: transform; }
.lt-part { transform-box: fill-box; transform-origin: 50% 100%; }
.lt-spark { transform-box: fill-box; transform-origin: center; animation: ltTwinkle 2.6s var(--ease-io) infinite; }
@keyframes ltTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(.55) rotate(45deg); }
}
.b-letter__hint { margin-top: 1.4rem; text-align: center; opacity: .55; }
.is-touch .only-mouse { display: none; }

/* Franja de color con bloques dentro */
.b-tint { background: var(--tint-bg); color: var(--tint-fg); padding-block: clamp(5rem, 9vw, 9rem); }
.b-tint__body > * + * { margin-top: var(--gutter); }

/* Patrón en dos cintas cruzadas (se mueven con la marquesina) */
.b-ribbon { --rib-h: clamp(64px, 10.5vw, 170px); --tilt: 3.2deg; --rise: .056; /* tan(--tilt) */ }
.b-ribbon .b-head { margin-bottom: clamp(1.5rem, 3vw, 3rem); }
/* Alto: la cinta + lo que sube/baja por la inclinación en el ancho de la pantalla + aire para la sombra */
.b-ribbon__stage { position: relative; height: calc(var(--rib-h) + 100vw * var(--rise) + 4rem); overflow: hidden; overflow: clip; }
.b-ribbon__tape {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130vw;
  height: var(--rib-h);
  margin: calc(var(--rib-h) / -2) 0 0 -65vw;
  overflow: hidden;
  background: var(--rib-bg);
  box-shadow: 0 -3px 12px -6px rgba(18, 18, 17, .22), 0 18px 36px -20px rgba(18, 18, 17, .4);
  clip-path: inset(-60% 0 -60% 100%);
  transition: clip-path 1.6s var(--ease-io);
}
.b-ribbon__tape--a { transform: rotate(calc(var(--tilt) * -1)); }
.b-ribbon__tape--b { transform: rotate(var(--tilt)); clip-path: inset(-60% 100% -60% 0); transition-delay: .15s; }
.b-ribbon__stage.is-in .b-ribbon__tape { clip-path: inset(-60% 0 -60% 0); }
.b-ribbon .marquee__track { height: 100%; }
.b-ribbon__tile { display: block; flex: none; height: 100%; width: calc(var(--rib-h) * var(--tile-ar)); overflow: hidden; }
.b-ribbon__tile img { height: 100%; width: calc(var(--rib-h) * var(--img-ar)); max-width: none; }

/* Carrusel continuo (panorámica con scroll horizontal) */
.b-pano { --slide-h: min(56svh, 720px); position: relative; }
.b-pano__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overflow: clip; /* evita que el foco de un botón desplace el contenedor */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding-top: calc(var(--header-h) + 4vh);
}
.b-pano__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.b-pano__title { margin-top: .8rem; font-size: var(--fs-h2); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.b-pano__meta { flex: 0 1 46%; display: flex; align-items: center; gap: 1.2rem; }
.b-pano__count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-pano__count b { color: var(--accent); font-weight: 500; }
.b-pano__count::after { content: ' · fin'; color: var(--accent); opacity: 0; transition: opacity .5s; }
.b-pano.is-end .b-pano__count::after { opacity: 1; }
.b-pano__bar { position: relative; flex: 1; height: 1px; background: var(--line); }
.b-pano__bar i { position: absolute; inset: 0; background: var(--fg); transform: scaleX(0); transform-origin: left; }
.b-pano__toggle { display: inline-grid; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 99px; white-space: nowrap; transition: background-color .4s, color .4s, border-color .4s; }
.b-pano__toggle span { grid-area: 1 / 1; text-align: center; transition: opacity .3s; }
.b-pano__toggle span:last-child, .b-pano.is-split .b-pano__toggle span:first-child { opacity: 0; }
.b-pano.is-split .b-pano__toggle span:last-child { opacity: 1; }
.b-pano__toggle:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.b-pano__track { position: relative; height: var(--slide-h); padding-inline: var(--gutter); }
.b-pano__slide { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: var(--slide-ar); margin: 0; will-change: transform; }
.b-pano__slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: border-radius .8s var(--ease-io); }
.b-pano__slide:first-child img { border-radius: var(--radius) 0 0 var(--radius); }
.b-pano__slide:last-child img { border-radius: 0 var(--radius) var(--radius) 0; }
.b-pano.is-split .b-pano__slide img { border-radius: var(--radius); }
.b-pano__slide figcaption { position: absolute; left: 0; top: calc(100% + .7rem); color: var(--muted); opacity: 0; transform: translateY(-6px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.b-pano.is-split .b-pano__slide figcaption { opacity: 1; transform: none; }

/* Reels con video integrado */
.b-reels { background: var(--reels-bg); color: var(--reels-fg); padding-block: clamp(5rem, 10vw, 10rem); }
.b-reels__row { display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 2.5rem); }
.b-reel { flex: 0 1 clamp(220px, 22vw, 320px); }
.b-reel__frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(var(--radius) * 1.2);
  background: rgba(0, 0, 0, .25);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.b-reel__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), opacity .4s; }
.b-reel:not(.is-playing) .b-reel__frame:hover img { transform: scale(1.05); }
.b-reel__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #121211;
  font-size: 1.3rem;
  transition: transform .5s var(--ease-back), opacity .3s;
}
.b-reel__play span { margin-left: 4px; }
.b-reel__frame:hover .b-reel__play { transform: scale(1.12); }
.b-reel__close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.b-reel.is-playing .b-reel__close { opacity: 1; pointer-events: auto; }
.b-reel.is-playing .b-reel__play, .b-reel.is-playing .b-reel__frame img { opacity: 0; pointer-events: none; }
.b-reel__frame iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; }
.b-reel__title { display: flex; align-items: baseline; gap: .7rem; margin-top: 1rem; font-size: clamp(1rem, 1.3vw, 1.25rem); letter-spacing: -.02em; }
.b-reel__title .mono { opacity: .6; }

/* Visor de stories (Instagram) */
.b-story { background: var(--st-bg); color: var(--st-fg); padding-block: clamp(5rem, 9vw, 9rem); overflow: hidden; overflow: clip; }
.b-story__inner { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; }
.b-story__info { grid-column: 1 / span 4; }
.b-story .label { color: inherit; opacity: .68; }
.b-story__title { margin-top: 1.2rem; font-size: var(--fs-h1); font-weight: 500; line-height: .9; letter-spacing: -.06em; }
.b-story__text { margin-top: 1.4rem; max-width: 30ch; opacity: .75; }
.b-story__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.b-story__count { font-variant-numeric: tabular-nums; }
.b-story__count b { font-size: 1.7em; font-weight: 500; }
.b-story__nav { display: flex; gap: .6rem; }
.b-story__btn { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 1.1rem; transition: background-color .4s, color .4s; }
.b-story__btn:hover { background: var(--st-fg); color: var(--st-bg); }
/* Teléfono con proporciones reales (≈ 9:19.5); la story va adentro en 9:16, completa */
.b-story__phone {
  position: relative;
  grid-column: 5 / span 4;
  justify-self: center;
  width: min(100%, calc(78svh * 9 / 19.5 + 20px));
  padding: 10px;
  border-radius: clamp(40px, 4.2vw, 56px);
  background: linear-gradient(145deg, #2a2a2c, #0b0b0c 40%, #1b1b1d);
  box-shadow: 0 50px 90px -35px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 4px #0b0b0c;
}
.b-story__phone::before,
.b-story__phone::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #1c1c1e;
}
.b-story__phone::before { left: -3px; top: 18%; height: 11%; box-shadow: 0 calc(var(--ph, 600px) * .14) 0 #1c1c1e; }
.b-story__phone::after { right: -3px; top: 24%; height: 15%; }
.b-story__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(32px, 3.5vw, 46px);
  background: #000;
  color: #fff;
  container-type: inline-size;
}
.b-story__status {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 12.5cqw;
  padding: 0 8.5cqw 0 10cqw;
  font-size: 4.4cqw;
  font-weight: 600;
  letter-spacing: -.01em;
}
.b-story__island { position: absolute; left: 50%; top: 2.8cqw; width: 30%; height: 8.6cqw; margin-left: -15%; border-radius: 99px; background: #000; box-shadow: 0 0 0 1px #111; }
.b-story__icons { width: 17cqw; height: auto; }
.b-story__view { position: relative; flex: none; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 3.2cqw; background: #111; }
.b-story__reply { flex: 1; display: flex; align-items: center; gap: 3.6cqw; padding: 0 4cqw; }
.b-story__input { flex: 1; padding: 2.6cqw 4.4cqw; border: 1px solid rgba(255, 255, 255, .55); border-radius: 99px; font-size: 3.8cqw; opacity: .9; white-space: nowrap; overflow: hidden; }
.b-story__reply svg { width: 7cqw; height: 7cqw; flex: none; }
.b-story__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.b-story__img.is-active { opacity: 1; }
.b-story__bars { position: absolute; top: 2.6cqw; left: 2.6cqw; right: 2.6cqw; z-index: 3; display: flex; gap: 1cqw; }
.b-story__bars i { flex: 1; height: max(2px, .7cqw); overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.b-story__bars b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.b-story__brand {
  position: absolute;
  top: 6cqw;
  left: 3.4cqw;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  color: #fff;
  font-size: 3.8cqw;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
.b-story__avatar { width: 8.4cqw; height: 8.4cqw; padding: .6cqw; border-radius: 50%; background: linear-gradient(45deg, #FEDA75, #D62976, #4F5BD5); }
.b-story__avatar span { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; background: var(--st-bg); font-size: 3.4cqw; text-shadow: none; }
.b-story__tap { position: absolute; top: 0; bottom: 0; z-index: 2; }
.b-story__tap--prev { left: 0; width: 38%; }
.b-story__tap--next { right: 0; width: 62%; }
.b-story__thumbs { grid-column: 9 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.b-story__thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 10px;
  opacity: .45;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: opacity .3s, outline-color .3s;
}
.b-story__thumb img { width: 100%; height: 100%; object-fit: cover; }
.b-story__thumb span { position: absolute; left: 6px; bottom: 5px; color: #fff; font-size: .6rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.b-story__thumb:hover { opacity: .85; }
.b-story__thumb.is-active { opacity: 1; outline-color: var(--st-fg); }

/* Cuadrícula de posts */
.b-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gutter); }
.b-grid > .b-fig { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols)); }
.b-grid__item .b-fig__frame { transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out), clip-path 1.5s var(--ease-io); }
.b-grid__item:hover .b-fig__frame { transform: translateY(-8px); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .45); }

/* Fila de stories: el dúo va unido */
.b-strip {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--gutter);
  width: min(100%, calc(72svh * var(--r) * var(--total) + (var(--groups) - 1) * var(--gutter)));
  margin-inline: auto;
}
.b-strip__group { flex: var(--n) 1 0; min-width: 0; }
.b-strip__label { margin-bottom: .8rem; color: var(--muted); }
.b-strip__row { display: flex; }
.b-strip__row img { display: block; flex: 1 1 0; min-width: 0; width: 100%; border-radius: var(--radius); transition: transform .7s var(--ease-out), border-radius .7s var(--ease-out); }
.is-joined .b-strip__row img { border-radius: 0; }
.is-joined .b-strip__row img:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.is-joined .b-strip__row img:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.is-joined .b-strip__row img + img { margin-left: -1px; }
/* Al pasar el mouse el dúo se separa un poco: se nota que son dos stories que continúan */
.is-joined:hover .b-strip__row img { border-radius: var(--radius); }
.is-joined:hover .b-strip__row img:first-child { transform: translateX(-8px) rotate(-1.2deg); }
.is-joined:hover .b-strip__row img:last-child { transform: translateX(8px) rotate(1.2deg); }

/* Sistema de color */
.b-colors { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: stretch; }
.b-colors__img { grid-column: 1 / span 7; }
.b-colors__list { grid-column: 8 / -1; display: flex; flex-direction: column; gap: .6rem; }
.b-swatch {
  position: relative;
  flex: 1 1 0;
  min-height: 84px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: clamp(1rem, 1.6vw, 1.6rem);
  border-radius: var(--radius);
  background: var(--c);
  color: var(--sc);
  box-shadow: inset 0 0 0 1px var(--line);
}
.b-swatch.is-in { transition: flex-grow .9s var(--ease-out), opacity 1s var(--ease-out) var(--d, 0ms), transform 1.2s var(--ease-out) var(--d, 0ms); }
.b-swatch:hover { flex-grow: 2.2; }
.b-swatch__name { font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 500; letter-spacing: -.04em; }
.b-swatch.is-copied::after { content: 'Copiado ✓'; position: absolute; top: 1rem; left: 1.2rem; font-family: var(--mono); font-size: .7rem; }

.p-palette { padding-bottom: clamp(5rem, 10vw, 12rem); }
.p-palette__head { display: flex; justify-content: space-between; margin-bottom: 1.6rem; }
.p-palette__hint { color: var(--muted); }
.swatches { display: flex; gap: .6rem; height: clamp(280px, 34vw, 480px); }
.swatch {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .3rem;
  padding: clamp(.9rem, 1.4vw, 1.4rem);
  border-radius: var(--radius);
  background: var(--c);
  color: var(--sc);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: flex-grow .9s var(--ease-out), opacity 1s var(--ease-out) var(--d, 0ms), transform 1.2s var(--ease-out) var(--d, 0ms);
}
.swatch:hover { flex-grow: 2.6; }
.swatch__name { font-size: clamp(1rem, 1.5vw, 1.5rem); font-weight: 500; letter-spacing: -.03em; }
.swatch.is-copied::after { content: 'Copiado ✓'; position: absolute; top: 1rem; left: 1rem; font-family: var(--mono); font-size: .7rem; }

.p-results { padding-block: clamp(6rem, 11vw, 13rem); }
.p-results__title { font-size: var(--fs-h2); font-weight: 500; line-height: 1; letter-spacing: -.045em; max-width: 16ch; margin: 1.5rem 0 clamp(3rem, 6vw, 6rem); }
.p-results__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
body[data-theme='project'] .stat__num sup { color: inherit; opacity: .6; }

.p-next {
  position: relative;
  display: block;
  padding: clamp(6rem, 12vw, 14rem) var(--gutter);
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.p-next__label { color: var(--muted); margin-bottom: 1.5rem; }
.p-next__title {
  position: relative;
  z-index: 2;
  font-size: calc(var(--fs-mega) * 1.05);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.07em;
  text-wrap: balance;
  transition: letter-spacing 1s var(--ease-out), color .5s;
}
.p-next:hover .p-next__title { letter-spacing: -.035em; }
.p-next__media {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: clamp(200px, 22vw, 360px);
  aspect-ratio: var(--cover-ratio);
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5) rotate(-10deg);
  transition: opacity .6s, transform 1s var(--ease-out);
}
.p-next:hover .p-next__media { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(4deg); }
.p-next__cta { display: inline-block; margin-top: 1.5rem; color: var(--muted); }

/* ==========================================================================
   SOBRE MÍ
   ========================================================================== */
.s-hero { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 9rem)); }
.s-hero .label { margin-bottom: 1.5rem; }
.s-hero__title { font-size: var(--fs-mega); font-weight: 500; line-height: .86; letter-spacing: -.066em; }
.s-hero__row { display: flex; justify-content: flex-start; align-items: flex-end; gap: 2rem; margin-top: clamp(2rem, 4vw, 4rem); }

.badge { position: relative; width: clamp(120px, 12vw, 180px); aspect-ratio: 1; flex: none; display: grid; place-items: center; }
.badge > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.badge text { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; fill: currentColor; }
.badge > span { font-size: 2.4rem; color: var(--accent); animation: spin 16s linear infinite reverse; }

/* ---------- Bio ---------- */
.bio {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: start;
  padding-block: clamp(3rem, 6vw, 6rem) 0;
}
.bio__media { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 2rem); }
.bio__photo {
  position: relative;
  aspect-ratio: var(--cover-ratio);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--soft);
  will-change: transform;
}
.bio__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.bio__media:hover .bio__photo img { scale: 1.06; }
.bio__glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .38), transparent 55%);
  opacity: 0;
  transition: opacity .5s;
  mix-blend-mode: overlay;
}
.bio__media:hover .bio__glare { opacity: 1; }
.bio__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--muted); }
[data-in].bio__media { opacity: 0; transform: translateY(60px); }
[data-in].bio__media.is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1.3s var(--ease-out); }
.bio__body { grid-column: 6 / -1; }
.bio__body > .label { margin-bottom: 1.6rem; }
.bio__text {
  font-size: clamp(1.6rem, 3.1vw, 3.4rem);
  font-weight: 450;
  line-height: 1.08;
  letter-spacing: -.04em;
}
.bio__text em { letter-spacing: -.015em; }
.bio__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: clamp(3rem, 5vw, 5rem); }
.bio__facts div { border-top: 1px solid var(--line); padding-top: .9rem; }
.bio__facts dt { color: var(--muted); margin-bottom: .5rem; }
.bio__facts dd { font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.manifesto {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding-block: clamp(6rem, 12vw, 14rem);
}
.manifesto__sticky { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
.manifesto__sticky .label { margin-bottom: 1.5rem; }
.manifesto__list { grid-column: 7 / -1; }
.principle {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1rem;
  padding: clamp(1.8rem, 3vw, 3rem) 0;
  border-top: 1px solid var(--line);
}
.principle:last-child { border-bottom: 1px solid var(--line); }
.principle__num { color: var(--accent); padding-top: .5em; }
.principle h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.05; letter-spacing: -.045em; }
.principle p { margin-top: .9rem; max-width: 46ch; color: var(--muted); }

.process { padding-block: clamp(6rem, 10vw, 12rem) clamp(3rem, 5vw, 6rem); }
.stack { position: relative; padding-bottom: 6vh; }
.stack__card {
  position: sticky;
  top: calc(var(--header-h) + 2vh + var(--i) * 1.6rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 2rem var(--gutter);
  min-height: min(64vh, 620px);
  margin-bottom: 10vh;
  padding: clamp(1.5rem, 3vw, 3.2rem);
  border-radius: calc(var(--radius) * 1.6);
  background: var(--card-bg);
  color: var(--card-fg);
  transform-origin: 50% 0;
  will-change: transform;
  overflow: hidden;
}
.stack__card::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.stack__card:last-child { margin-bottom: 0; }
.stack__top { grid-column: 1 / -1; display: flex; justify-content: space-between; opacity: .75; }
.stack__title {
  align-self: start;
  display: flex;
  flex-direction: column;
  font-size: clamp(2.6rem, 6.4vw, 7rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.065em;
}
.stack__num { font-size: .4em; font-weight: 300; letter-spacing: -.03em; margin-bottom: .4em; opacity: .6; }
.stack__body { align-self: end; }
.stack__body p { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -.02em; max-width: 36ch; }
.stack__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.stack__tags li { padding: .45rem .9rem; border: 1px solid currentColor; border-radius: 99px; }

/* ---------- Trayectoria ---------- */
.xp { padding-block: clamp(6rem, 11vw, 13rem) clamp(6rem, 10vw, 12rem); }
.xp__item {
  position: relative;
  display: grid;
  grid-template-columns: .7fr 1.5fr 1.2fr .6fr;
  gap: 1rem;
  align-items: center;
  padding: clamp(1.1rem, 2vw, 1.9rem) 0;
  border-top: 1px solid var(--line);
  font-size: clamp(1.1rem, 1.7vw, 1.75rem);
  letter-spacing: -.025em;
  isolation: isolate;
  transition: color .5s;
}
.xp__item:last-child { border-bottom: 1px solid var(--line); }
.xp__item::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--gutter) * -1);
  z-index: -1;
  background: var(--accent);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s var(--ease-io);
}
.xp__item:hover { color: #121211; }
.xp__item:hover::before { clip-path: inset(0 0 0 0); }
.xp__item > span { transition: transform .7s var(--ease-out); }
.xp__item:hover .xp__role { transform: translateX(1rem); }
.xp__years { font-size: .8rem; }
.xp__place { color: var(--muted); transition: color .5s; }
.xp__item:hover .xp__place { color: inherit; }
.xp__city { font-size: .8rem; text-align: right; }

.playground { padding-top: clamp(5rem, 9vw, 10rem); overflow: hidden; }
.playground__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.playground__head .label { margin-bottom: 1.2rem; }
.playground__side { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; max-width: 32ch; }
.playground__canvas { width: 100%; height: clamp(440px, 74vh, 860px); touch-action: none; }
.playground__canvas.is-grabbing { cursor: grabbing; }

/* Letras gelatinosas al pasar el cursor (404) */
.sc.is-jelly { animation: jelly .9s var(--ease-out) both; transform-origin: 50% 100%; }
@keyframes jelly {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1.25, .72); }
  40% { transform: scale(.8, 1.22) translateY(-8%); }
  55% { transform: scale(1.1, .9); }
  70% { transform: scale(.96, 1.05); }
  85% { transform: scale(1.02, .98); }
  100% { transform: scale(1, 1); }
}

/* ==========================================================================
   404
   ========================================================================== */
.nf { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.6rem; padding-block: calc(var(--header-h) + 2rem) 4rem; }
.nf__title { font-size: clamp(8rem, 36vw, 40rem); font-weight: 500; line-height: .8; letter-spacing: -.08em; }
.nf__text { font-size: var(--fs-h3); letter-spacing: -.035em; }

/* ==========================================================================
   Modo noche: ajustes finos
   ========================================================================== */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .nav { display: none; }
  .header { grid-template-columns: 1fr auto; }
  .menu__inner { grid-template-columns: 1fr; }
  .menu__preview { display: none; }
  .hero__bottom { grid-template-columns: 1fr auto; }
  .hero__hint { display: none; }
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: 3rem; }
  .footer__cta { grid-column: 1 / -1; }
  .work { --cols: 3rem 1.6fr 1fr 6rem 2rem; }
  [data-view='grid'] { grid-template-columns: repeat(2, 1fr); }
  [data-view='grid'] .work-item:nth-child(3n + 2) { margin-top: 0; }
  [data-view='grid'] .work-item:nth-child(2n) { margin-top: clamp(0rem, 8vw, 6rem); }
  .card--1 { grid-column: 1 / span 7; }
  .card--2 { grid-column: 8 / span 5; }
  .card--3 { grid-column: 1 / span 5; }
  .card--4 { grid-column: 6 / span 7; }
  .bio__media { grid-column: 1 / span 5; }
  .bio__body { grid-column: 7 / -1; }
  .bio__facts { grid-template-columns: 1fr 1fr; }
  .b-deck__info { grid-column: 1 / span 5; }
  .b-deck__stage { grid-column: 7 / -1; }
  .b-icons__stage { grid-column: 1 / span 5; }
  .b-arch { flex-basis: calc((100% - 2 * var(--gutter)) / 3); }
  .b-story__info { grid-column: 1 / span 5; }
  .b-story__phone { grid-column: 6 / span 4; }
  .b-story__thumbs { grid-column: 10 / -1; grid-template-columns: repeat(2, 1fr); }
  .p-hero__tag { grid-column: 1 / -1; }
  .p-hero__meta { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; --fs-mega: 14.5vw; }
  .loader__top span:nth-child(2) { display: none; }
  .header__clock { display: none; }
  .header__right { gap: .65rem; }
  .lang-btn { padding: 0 .55rem; }
  .lang-note { width: calc(100vw - 2 * var(--gutter) - 68px); } /* deja libre el botón de volver arriba */
  .section-head { display: block; }
  .section-head .label { margin-bottom: 1.2rem; }

  .hero__title { font-size: 16vw; }
  .hero__top { flex-direction: column; gap: .4rem; }
  .hero__top span:nth-child(2) { display: none; }
  .line--right { text-align: left; padding-left: .5em !important; }
  .hero__bottom { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }

  .intro { display: block; }
  .intro > .label { margin-bottom: 1.5rem; }
  .intro__foot { flex-direction: column; align-items: flex-start; }

  .featured__grid { display: flex; flex-direction: column; row-gap: 4rem; }
  .card--2, .card--4 { margin-top: 0; }
  .card__info { grid-template-columns: auto 1fr; }
  .card__meta { grid-column: 1 / -1; text-align: left; }

  .hscroll__intro { width: 82vw; }
  .service { width: 80vw; height: min(64vh, 560px); }
  .hscroll__end { width: 70vw; }
  .hscroll__head .label { display: none; }

  .arch { width: 72vw; }

  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__brand { font-size: 19vw; margin-top: 3rem; }

  .menu__foot { grid-template-columns: 1fr; gap: 1.6rem; }
  .menu__link { font-size: clamp(3rem, 15vw, 5rem); }

  .work-hero__row { flex-direction: column; align-items: flex-start; }
  .work { --cols: 2.2rem 1fr 5.8rem; }
  .work__head span:nth-child(3), .work__head span:nth-child(5), [data-view='list'] .work-item__cats, [data-view='list'] .work-item__arrow { display: none; }
  [data-view='grid'] { grid-template-columns: 1fr; }
  [data-view='grid'] .work-item:nth-child(2n) { margin-top: 0; }

  .p-hero__meta { grid-template-columns: 1fr 1fr; }
  .p-cover { height: 140vh; }
  .p-intro { display: block; }
  .p-intro > .label { margin-bottom: 2rem; }
  .p-intro__cols { grid-template-columns: 1fr; }
  .g-row { grid-template-columns: 1fr; }
  .g--offset { margin-top: 0; }
  .swatches { flex-direction: column; height: auto; }
  .swatch { min-height: 88px; }
  .swatch:hover { flex-grow: 1; }
  .p-results__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .b-head__main { grid-column: auto; }
  .b-pair { flex-direction: column; }
  .b-pair > .b-fig { flex: none; width: 100%; }
  .b-deck__inner { display: flex; flex-direction: column; align-items: stretch; gap: 3.5rem; }
  .b-deck__stage { align-self: center; width: 68vw; max-width: 340px; margin: 0; left: -8%; }
  .b-icons__layout { display: block; }
  .b-icons__stage { position: relative; top: 0; aspect-ratio: 16 / 10; margin-bottom: 1.2rem; }
  .b-icons__big svg, .b-icons__big img { width: 44%; height: 44%; }
  .b-icons__grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
  .b-arch { flex-basis: calc((100% - var(--gutter)) / 2); }
  .b-colors { display: flex; flex-direction: column; }
  .b-colors__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-swatch { min-height: 110px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .3rem; }
  .b-swatch:hover { flex-grow: 1; }
  .b-ribbon { --rib-h: 84px; --tilt: 5deg; --rise: .0875; }
  .b-tabs__nav { gap: .8rem; }
  .b-tab__label { font-size: 1rem; }
  .b-compare__handle span { width: 44px; height: 44px; }
  .b-pano { --slide-h: min(54svh, 560px); }
  .b-pano__head { flex-direction: column; align-items: stretch; gap: 1.2rem; }
  .b-pano__meta { flex: none; }
  .b-reels__row {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 1rem;
    scrollbar-width: none;
  }
  .b-reels__row::-webkit-scrollbar { display: none; }
  .b-reel { flex: 0 0 66vw; scroll-snap-align: center; }
  .b-story__inner { display: flex; flex-direction: column; align-items: stretch; gap: 2.5rem; }
  .b-story__phone { align-self: center; width: min(76vw, 330px); padding: 8px; border-radius: 44px; }
  .b-story__screen { border-radius: 37px; }
  .b-story__thumbs {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter);
    scrollbar-width: none;
  }
  .b-story__thumbs::-webkit-scrollbar { display: none; }
  .b-story__thumb { flex: 0 0 15vw; }
  .b-grid { --cols: 2 !important; }
  .b-strip {
    width: auto;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 1rem;
    scrollbar-width: none;
  }
  .b-strip::-webkit-scrollbar { display: none; }
  .b-strip__group { flex: none; width: calc(var(--n) * 58vw); scroll-snap-align: center; }

  .s-hero__row { flex-direction: column; align-items: flex-end; }
  .manifesto { display: block; }
  .manifesto__sticky { position: static; margin-bottom: 3rem; }
  .stack__card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 70vh; }
  .bio { display: block; }
  .bio__media { position: static; max-width: 420px; margin-bottom: 4rem; }
  .bio__facts { grid-template-columns: 1fr 1fr; }
  .xp__item { grid-template-columns: 1fr auto; row-gap: .2rem; }
  .xp__years { grid-column: 1 / -1; }
  .xp__place { grid-column: 1; font-size: .95rem; }
  .xp__city { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .playground__canvas { height: 58vh; }
}

/* Pantallas muy angostas: el idioma se cambia desde el menú para no encimar el logo */
@media (max-width: 373px) {
  .lang-btn { display: none; }
}

@media (hover: none) {
  [data-view='list'] .work-item__media { display: block; width: 100%; aspect-ratio: var(--cover-ratio); border-radius: 8px; overflow: hidden; }
  .work { --cols: 3.6rem 1fr 5.8rem; }
  [data-view='list'] .work-item__idx,
  [data-view='list'] .work-item__cats,
  [data-view='list'] .work-item__arrow { display: none; }
  .work__head { display: none; }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .sc, .swi, [data-reveal], [data-reveal-clip], .card__media, .card__info, .card__media .cover, [data-in] {
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transition: none !important;
  }
  .grain { display: none; }
}