/* ==========================================================================
   Danilo Macedo — Portfolio
   Paleta, tipografías y medidas tomadas del editable de Illustrator
   (mesa de trabajo de 1920 px: 1 unidad de diseño = var(--u)).
   ========================================================================== */

@font-face { font-family: "Open Sans"; src: url("../assets/fonts/OpenSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../assets/fonts/OpenSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: block; }
@font-face { font-family: "Open Sans Condensed"; src: url("../assets/fonts/OpenSans_Condensed-Medium.ttf") format("truetype"); font-weight: 500; font-display: block; }
@font-face { font-family: "Open Sans Condensed"; src: url("../assets/fonts/OpenSans_Condensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: block; }
@font-face { font-family: "Open Sans Condensed"; src: url("../assets/fonts/OpenSans_Condensed-Bold.ttf") format("truetype"); font-weight: 700; font-display: block; }
@font-face { font-family: "Open Sans Condensed"; src: url("../assets/fonts/OpenSans_Condensed-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: block; }

:root {
  --yellow: #f9e801;
  --ray: #f2de25;
  --pink: #ff00a6;
  --navy: #140029;
  --purple: #6c00ff;
  --purple-2: #6900ff;
  --orange: #ff5a00;
  --cyan: #00f4ff;
  --white: #ffffff;

  --u: calc(100vw / 1920);
  --pad: calc(114 * var(--u));
  --nav-h: calc(93.4 * var(--u));
  --nav-top: calc(57 * var(--u));

  --sans: "Open Sans", "Segoe UI", Arial, sans-serif;
  --cond: "Open Sans Condensed", "Arial Narrow", "Open Sans", sans-serif;

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

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--white);
  background: var(--navy);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.is-locked, html.is-locked body { overflow: hidden; }
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
::selection { background: var(--cyan); color: var(--navy); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: var(--pink); border: 3px solid var(--navy); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

.xb { font-family: var(--sans); font-weight: 800; letter-spacing: -.075em; text-transform: uppercase; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----------------------------------------------------------------------- */
/* Loader                                                                  */
/* ----------------------------------------------------------------------- */
.loader { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.loader__panel { position: absolute; inset: 0; transform-origin: 50% 0; will-change: transform; }
.loader__panel:nth-child(1) { background: var(--pink); }
.loader__panel:nth-child(2) { background: var(--purple); }
.loader__panel:nth-child(3) { background: var(--navy); display: grid; place-items: center; }
.loader__box { display: flex; align-items: center; gap: calc(26 * var(--u)); color: var(--yellow); }
.loader__star { width: calc(110 * var(--u)); min-width: 54px; animation: spin 1.6s var(--ease-io) infinite; }
.loader__pct { font: 800 calc(150 * var(--u))/1 var(--sans); letter-spacing: -.075em; min-width: 2.4ch; font-size: max(64px, calc(150 * var(--u))); font-variant-numeric: tabular-nums; }
.loader.is-done .loader__panel { transition: transform .9s var(--ease-io); transform: translate3d(0, -101%, 0); }
.loader.is-done .loader__panel:nth-child(3) { transition-delay: 0s; }
.loader.is-done .loader__panel:nth-child(2) { transition-delay: .1s; }
.loader.is-done .loader__panel:nth-child(1) { transition-delay: .2s; }
.loader.is-gone { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------------- */
/* Nav (barra navy, a 57u del borde superior como en el editable)           */
/* ----------------------------------------------------------------------- */
.nav {
  position: fixed; left: 0; right: 0; top: 0; z-index: 60;
  height: var(--nav-h); min-height: 52px;
  background: var(--navy);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  transform: translate3d(0, var(--nav-y, var(--nav-top)), 0);
  will-change: transform;
}
.nav__links { display: flex; align-items: center; gap: calc(44 * var(--u)); margin-left: calc(-14 * var(--u)); }
.nav__link {
  position: relative; display: inline-block;
  font: 800 max(15px, calc(26.4 * var(--u)))/1 var(--sans); letter-spacing: -.075em; text-transform: uppercase;
  padding: .5em .55em; color: var(--white);
  transition: color .25s, transform .45s var(--ease-back);
}
.nav__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c, var(--pink));
  transform: scale(0, 1) rotate(-2deg); transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
  box-shadow: calc(5 * var(--u)) calc(5 * var(--u)) 0 var(--white);
}
.nav__link::after {
  content: ""; position: absolute; left: .55em; right: .62em; bottom: .12em; height: .14em;
  background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out);
}
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link:nth-child(1) { --c: var(--pink); }
.nav__link:nth-child(2) { --c: var(--purple); }
.nav__link:nth-child(3) { --c: var(--cyan); --ct: var(--navy); }
.nav__link:nth-child(4) { --c: var(--orange); }
@media (hover: hover) {
  .nav__link:hover { color: var(--ct, var(--white)); transform: translateY(-2px) rotate(-2deg); }
  .nav__link:hover::before { transform: scale(1, 1) rotate(0deg); }
  .nav__link:hover::after { transform: scaleX(0); }
}
.nav__right { display: flex; align-items: center; gap: calc(28 * var(--u)); }
.lang { display: flex; border: 2px solid var(--white); font: 800 max(12px, calc(19 * var(--u)))/1 var(--cond); letter-spacing: .04em; }
.lang button { padding: .5em .7em .45em; transition: background .25s, color .25s; }
.lang button.is-on { background: var(--yellow); color: var(--navy); }
@media (hover: hover) { .lang button:not(.is-on):hover { background: var(--pink); } }
.social { display: block; width: calc(43.4 * var(--u)); min-width: 28px; color: var(--white); transition: transform .4s var(--ease-back), filter .3s; }
.social svg { width: 100%; height: auto; }
.social .fg { fill: var(--navy); }
@media (hover: hover) {
  .social:hover { transform: translate(-4px, -4px) rotate(-6deg); filter: drop-shadow(5px 5px 0 var(--pink)); }
  .social:nth-of-type(2):hover { transform: translate(-4px, -4px) rotate(6deg); filter: drop-shadow(5px 5px 0 var(--cyan)); }
}

/* ----------------------------------------------------------------------- */
/* Hero                                                                    */
/* ----------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--yellow);
  height: clamp(calc(620 * var(--u)), calc(100svh - 120 * var(--u)), calc(1089 * var(--u)));
  min-height: 420px;
}
.burst {
  position: absolute; left: 50%; top: 56%; z-index: -1;
  width: 64vmax; height: 64vmax; margin: -32vmax 0 0 -32vmax;
  transform: scale(3.6) rotate(0deg); will-change: transform; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, transparent 0, transparent 3%, #000 13%);
          mask-image: radial-gradient(circle, transparent 0, transparent 3%, #000 13%);
}
.hero__stage {
  position: absolute; left: 0; right: 0; bottom: 0;
  top: calc(var(--nav-top) + var(--nav-h));
  display: grid; place-items: center;
  padding: calc(20 * var(--u)) calc(100 * var(--u)) calc(96 * var(--u));
}
.lockup { width: 100%; height: 100%; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lockup text { font-family: var(--sans); font-weight: 800; letter-spacing: -.075em; pointer-events: none; }
.lockup .t-made { font-family: var(--cond); letter-spacing: -.075em; }
.lockup .t-amp { letter-spacing: 0; }
.sticker { cursor: grab; }
.sticker.is-drag { cursor: grabbing; }
.spark { cursor: pointer; }
.hero__foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: calc(26 * var(--u));
  display: flex; justify-content: space-between; align-items: flex-end;
  font: 800 max(11px, calc(21 * var(--u)))/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--navy);
  pointer-events: none;
}
.hero__foot b { font-weight: 800; }
.hero__foot i { font-style: normal; color: var(--pink); letter-spacing: -.05em; margin: 0 .35em; }
.hero__scroll { display: inline-flex; align-items: center; gap: .6em; }
.hero__scroll svg { width: 1.1em; animation: bob 1.4s var(--ease-io) infinite; }
@keyframes bob { 50% { transform: translateY(35%); } }

/* ----------------------------------------------------------------------- */
/* Cinta de clientes                                                       */
/* ----------------------------------------------------------------------- */
.clients {
  position: relative; z-index: 2; overflow: hidden;
  height: calc(119.8 * var(--u)); min-height: 62px;
  background: var(--purple); color: var(--white);
  display: flex; align-items: center;
}
.clients__track { display: flex; align-items: center; flex: none; will-change: transform; }
.clients__logo {
  flex: none; display: grid; place-items: center;
  padding: 0 calc(42 * var(--u)); height: calc(119.8 * var(--u)); min-height: 62px;
  transition: color .3s, transform .5s var(--ease-back);
}
.clients__logo svg { height: calc(var(--h) * var(--u)); min-height: calc(var(--h) * .5px); width: auto; }
@media (hover: hover) {
  .clients__logo:hover { color: var(--yellow); transform: scale(1.22) rotate(-4deg); }
  .clients__logo:nth-child(even):hover { color: var(--cyan); transform: scale(1.22) rotate(4deg); }
}

/* ----------------------------------------------------------------------- */
/* Work — grilla de tarjetas: portada (202:158) + franja rosa debajo        */
/* ----------------------------------------------------------------------- */
.work { position: relative; background: var(--pink); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; color: var(--white); background: var(--pink); isolation: isolate; overflow: hidden; }
.card__media { position: relative; aspect-ratio: 202 / 158; overflow: hidden; background: var(--navy); }
.card__reveal { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-io) var(--d, 0s); }
.card.is-in .card__reveal { clip-path: inset(0 0 0 0); }
.card__par { position: absolute; left: 0; right: 0; top: -6%; height: 112%; will-change: transform; }
.card__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 1.1s var(--ease-out); }
.card__cap {
  position: relative; z-index: 2; flex: 1 0 auto; overflow: hidden;
  height: calc(150 * var(--u)); min-height: 92px; padding: calc(22 * var(--u)) calc(34 * var(--u));
  background: var(--pink); display: flex; flex-direction: column; justify-content: center;
  transition: background .45s var(--ease-out);
}
.card__meta {
  font: 700 max(11px, calc(18 * var(--u)))/1.1 var(--cond); letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: calc(9 * var(--u)); display: flex; gap: .7em; white-space: nowrap; overflow: hidden;
}
.card__title { font: 800 max(17px, calc(32 * var(--u)))/1.03 var(--sans); letter-spacing: -.075em; text-transform: uppercase; transition: color .35s; }
.card__title .w { display: inline-block; white-space: nowrap; }
.card__title .c { display: inline-block; }
.card__capfoot { display: none; }

/* panel que sube sobre la portada al pasar el mouse */
.card__over {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; isolation: isolate;
  background: var(--hover, var(--purple));
  padding: calc(36 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u));
  display: flex; flex-direction: column;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transition: clip-path .6s var(--ease-io);
}
.card__num {
  position: absolute; z-index: -1; right: calc(16 * var(--u)); bottom: calc(-40 * var(--u));
  font: 800 calc(230 * var(--u))/1 var(--sans); letter-spacing: -.08em;
  color: transparent; -webkit-text-stroke: max(1.5px, calc(3 * var(--u))) rgba(255, 255, 255, .2);
  pointer-events: none; user-select: none;
}
.card__desc { font: 500 max(13.5px, calc(22 * var(--u)))/1.26 var(--sans); }
.card__foot { margin-top: auto; padding-top: calc(18 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); align-items: center; }
.card__desc, .card__foot { opacity: 0; transform: translate3d(0, calc(26 * var(--u)), 0); transition: opacity .35s, transform .6s var(--ease-out); }
.tag {
  display: inline-block; font: 800 max(11px, calc(18 * var(--u)))/1 var(--cond); letter-spacing: .07em; text-transform: uppercase;
  padding: .5em .7em .42em; border: max(1.5px, calc(2.5 * var(--u))) solid currentColor; white-space: nowrap;
}
.cta {
  display: inline-flex; align-items: center; gap: .5em; margin-right: calc(8 * var(--u));
  font: 800 max(12px, calc(21 * var(--u)))/1 var(--sans); letter-spacing: -.05em; text-transform: uppercase;
  background: var(--cyan); color: var(--navy); padding: .62em .8em;
  box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 var(--pink);
  transform: rotate(-2deg); transition: transform .5s var(--ease-back), box-shadow .3s;
}
.cta svg { width: 1em; height: 1em; transition: transform .5s var(--ease-back); }

@media (hover: hover) {
  .card:hover .card__over { clip-path: polygon(0 -14%, 100% 0, 100% 100%, 0 100%); }
  .card:hover .card__desc, .card:hover .card__foot { opacity: 1; transform: none; transition-delay: .2s; }
  .card:hover .card__foot { transition-delay: .28s; }
  .card:hover .card__cap { background: var(--hover, var(--purple)); }
  .card:hover .card__title { color: var(--yellow); }
  .card:hover .card__title .c { animation: hop .55s var(--ease-back) both; animation-delay: calc(var(--i) * 14ms); }
  .card:hover .card__img { transform: scale(1.08); }
  .cta:hover, .card:hover .cta { transform: rotate(2deg) scale(1.06); box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 var(--yellow); }
  .card:hover .cta svg { transform: translateX(.25em); }
}
/* sin hover (touch): la franja muestra premios y "Ver caso", sin panel */
@media (hover: none), (max-width: 820px) {
  .card__over { display: none; }
  .card__cap { height: auto; justify-content: flex-start; padding-bottom: calc(30 * var(--u)); }
  .card__capfoot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
  .card__capfoot .cta { box-shadow: 4px 4px 0 var(--navy); }
}
@keyframes hop { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-.22em) rotate(-4deg); } 100% { transform: translateY(0) rotate(0); } }

/* última celda: pase al Archive (main.js le da el ancho que falte para cerrar la fila) */
.grid__more {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: calc(18 * var(--u));
  min-height: calc(250 * var(--u)); padding: calc(40 * var(--u)) calc(44 * var(--u));
  background: var(--yellow); color: var(--navy);
}
.grid__more::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cyan); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transition: clip-path .6s var(--ease-io); }
.grid__more-k { font: 800 max(12px, calc(21 * var(--u)))/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.grid__more b { font: 800 max(26px, calc(60 * var(--u)))/.98 var(--sans); letter-spacing: -.075em; text-transform: uppercase; max-width: 9em; }
.grid__more svg { width: calc(84 * var(--u)); min-width: 44px; height: auto; margin-top: calc(8 * var(--u)); transition: transform .5s var(--ease-back); }
@media (hover: hover) {
  .grid__more:hover::before { clip-path: polygon(0 -14%, 100% 0, 100% 100%, 0 100%); }
  .grid__more:hover svg { transform: translateY(18%) rotate(-8deg) scale(1.1); }
}

.band { height: calc(33.7 * var(--u)); min-height: 12px; background: var(--purple); }

/* cursor "VIEW" que sigue al mouse sobre los proyectos */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none;
  width: calc(150 * var(--u)); height: calc(150 * var(--u)); min-width: 96px; min-height: 96px;
  margin: calc(-75 * var(--u)) 0 0 calc(-75 * var(--u));
  display: grid; place-items: center; will-change: transform;
}
.cursor__in {
  width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%;
  background: var(--yellow); color: var(--navy); border: max(3px, calc(6 * var(--u))) solid var(--navy);
  font: 800 max(13px, calc(23 * var(--u)))/1 var(--sans); letter-spacing: -.06em; text-transform: uppercase;
  transform: scale(0) rotate(-30deg); transition: transform .45s var(--ease-back);
}
.cursor.is-on .cursor__in { transform: scale(1) rotate(-8deg); }
@media (hover: none) { .cursor { display: none; } }

/* ----------------------------------------------------------------------- */
/* Títulos-sticker (generados como SVG desde JS)                           */
/* ----------------------------------------------------------------------- */
.stk { display: block; font-size: calc(150 * var(--u)); line-height: 0; margin: 0; }
.stk svg { display: inline-block; overflow: visible; max-width: none; cursor: pointer; }
.stk text { font-family: var(--sans); font-weight: 800; letter-spacing: -.075em; pointer-events: none; }

/* ----------------------------------------------------------------------- */
/* Archive                                                                 */
/* ----------------------------------------------------------------------- */
.archive { position: relative; background: var(--navy); color: var(--white); padding: calc(150 * var(--u)) 0 calc(170 * var(--u)); overflow: hidden; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: calc(40 * var(--u)); padding: 0 var(--pad); margin-bottom: calc(80 * var(--u)); }
.sec-head__side { max-width: calc(620 * var(--u)); font: 500 max(15px, calc(26 * var(--u)))/1.25 var(--sans); }
.filters { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-top: calc(28 * var(--u)); }
.filter {
  font: 800 max(12px, calc(20 * var(--u)))/1 var(--cond); letter-spacing: .07em; text-transform: uppercase;
  padding: .65em .9em .55em; border: max(1.5px, calc(2.5 * var(--u))) solid var(--white);
  transition: background .25s, color .25s, transform .4s var(--ease-back), border-color .25s;
}
.filter.is-on { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
@media (hover: hover) { .filter:hover { transform: translateY(-3px) rotate(-2deg); } .filter:not(.is-on):hover { background: var(--pink); border-color: var(--pink); } }

.arc {
  position: relative; display: grid; align-items: center;
  grid-template-columns: calc(110 * var(--u)) 1fr calc(330 * var(--u)) calc(120 * var(--u)) calc(70 * var(--u));
  padding: calc(30 * var(--u)) var(--pad);
  border-top: max(1.5px, calc(2.5 * var(--u))) solid rgba(255, 255, 255, .22);
  color: var(--white); isolation: isolate;
  opacity: 0; transform: translate3d(0, calc(40 * var(--u)), 0);
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), color .25s;
}
.arc.is-in { opacity: 1; transform: none; }
.arc.is-out { display: none; }
.arc:last-child { border-bottom: max(1.5px, calc(2.5 * var(--u))) solid rgba(255, 255, 255, .22); }
.arc::before { content: ""; position: absolute; inset: -1px 0; z-index: -1; background: var(--yellow); transform: scaleY(0); transform-origin: 50% var(--oy, 100%); transition: transform .45s var(--ease-out); }
.arc__num { font: 800 max(12px, calc(22 * var(--u)))/1 var(--cond); letter-spacing: .06em; color: var(--pink); transition: color .25s; }
.arc__title { font: 800 max(20px, calc(58 * var(--u)))/1 var(--sans); letter-spacing: -.075em; text-transform: uppercase; transition: transform .6s var(--ease-out); padding-right: 1em; }
.arc__title small { display: inline-block; vertical-align: middle; margin-left: .8em; font: 800 max(10px, calc(17 * var(--u)))/1 var(--cond); letter-spacing: .07em; padding: .45em .6em .38em; background: var(--pink); color: var(--white); transform: rotate(-3deg) translateY(-.4em); }
.arc__cat, .arc__year { font: 700 max(12px, calc(22 * var(--u)))/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.arc__year { text-align: right; font-variant-numeric: tabular-nums; }
.arc__go { justify-self: end; width: calc(40 * var(--u)); min-width: 20px; transform: rotate(45deg); transition: transform .5s var(--ease-back); }
.arc__thumb { display: none; }
@media (hover: hover) {
  .arc:hover { color: var(--navy); }
  .arc:hover::before { transform: scaleY(1); }
  .arc:hover .arc__title { transform: translate3d(calc(26 * var(--u)), 0, 0); }
  .arc:hover .arc__go { transform: rotate(90deg) scale(1.2); }
  .arc:hover .arc__num { color: var(--purple); }
}
.peek {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
  width: calc(430 * var(--u)); min-width: 240px; aspect-ratio: 202 / 158;
  will-change: transform;
}
.peek__in {
  width: 100%; height: 100%; overflow: hidden; background: var(--navy);
  border: max(4px, calc(9 * var(--u))) solid var(--navy);
  box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--pink);
  transform: scale(0) rotate(-14deg); transition: transform .5s var(--ease-back);
}
.peek.is-on .peek__in { transform: scale(1) rotate(0deg); }
.peek img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .peek { display: none; } }

/* ----------------------------------------------------------------------- */
/* About                                                                   */
/* ----------------------------------------------------------------------- */
.about { position: relative; background: var(--cyan); color: var(--navy); padding: calc(160 * var(--u)) var(--pad) calc(150 * var(--u)); overflow: hidden; }
.about__grid { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; gap: calc(110 * var(--u)); align-items: start; }
.portrait {
  position: relative; background: var(--white); border: calc(14 * var(--u)) solid var(--navy);
  box-shadow: calc(22 * var(--u)) calc(22 * var(--u)) 0 var(--navy);
  transform: rotate(-3deg); transition: transform .7s var(--ease-back); overflow: hidden;
  margin-top: calc(20 * var(--u));
}
/* el retrato va siempre en blanco y negro */
.portrait img { width: 100%; height: auto; filter: grayscale(1); transition: transform .9s var(--ease-out); }
@media (hover: hover) { .portrait:hover { transform: rotate(2deg) scale(1.03); } .portrait:hover img { transform: scale(1.06); } }
.about__star { position: absolute; width: calc(150 * var(--u)); pointer-events: none; }
.about__lead { font: 800 max(26px, calc(66 * var(--u)))/1.02 var(--sans); letter-spacing: -.075em; text-transform: uppercase; margin: calc(46 * var(--u)) 0 calc(40 * var(--u)); max-width: 15em; }
.about__lead em { font-style: normal; background: var(--navy); color: var(--yellow); padding: 0 .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.about__body { font: 500 max(15px, calc(28 * var(--u)))/1.25 var(--sans); max-width: calc(960 * var(--u)); margin-bottom: 1em; }
.about__actions { display: flex; flex-wrap: wrap; gap: calc(22 * var(--u)); margin-top: calc(44 * var(--u)); }
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font: 800 max(13px, calc(24 * var(--u)))/1 var(--sans); letter-spacing: -.055em; text-transform: uppercase;
  padding: .85em 1.05em; background: var(--bg, var(--navy)); color: var(--fg, var(--white));
  box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 var(--sh, var(--pink));
  transition: transform .45s var(--ease-back), box-shadow .3s;
}
.btn svg { width: 1em; height: 1em; flex: none; transition: transform .45s var(--ease-back); }
@media (hover: hover) {
  .btn:hover { transform: translate(-4px, -4px) rotate(-1.5deg); box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--sh, var(--pink)); }
  .btn:hover svg { transform: translate(.15em, -.15em); }
}
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--sh, var(--pink)); }

.xp { margin-top: calc(130 * var(--u)); }
.label { font: 800 max(12px, calc(22 * var(--u)))/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; margin-bottom: calc(22 * var(--u)); display: flex; align-items: center; gap: .7em; }
.label::before { content: ""; width: 2.2em; height: .32em; background: currentColor; }
.xp__row {
  position: relative; isolation: isolate; display: grid; grid-template-columns: calc(330 * var(--u)) 1fr auto; align-items: center; gap: calc(30 * var(--u));
  padding: calc(26 * var(--u)) calc(20 * var(--u)); border-top: max(2px, calc(3.5 * var(--u))) solid var(--navy); transition: color .25s;
}
.xp__row:last-child { border-bottom: max(2px, calc(3.5 * var(--u))) solid var(--navy); }
.xp__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.xp__years { font: 800 max(14px, calc(30 * var(--u)))/1 var(--cond); letter-spacing: .04em; }
.xp__co { font: 800 max(18px, calc(44 * var(--u)))/1 var(--sans); letter-spacing: -.07em; text-transform: uppercase; }
.xp__now {
  display: inline-flex; align-items: center; gap: .5em; margin-left: 1em; vertical-align: middle; font-style: normal; white-space: nowrap;
  font: 800 max(11px, calc(18 * var(--u)))/1 var(--cond); letter-spacing: .08em; text-transform: uppercase;
  background: var(--navy); color: var(--yellow); padding: .55em .75em .45em;
  transform: rotate(-3deg) translateY(-.3em); transition: background .25s, color .25s;
}
.xp__now::before { content: ""; width: .62em; height: .62em; border-radius: 50%; background: var(--pink); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .45; } }
@media (hover: hover) { .xp__row:hover .xp__now { background: var(--yellow); color: var(--navy); } }
.xp__role { font: 700 max(12px, calc(22 * var(--u)))/1.1 var(--cond); letter-spacing: .08em; text-transform: uppercase; text-align: right; }
@media (hover: hover) { .xp__row:hover { color: var(--cyan); } .xp__row:hover::before { transform: scaleX(1); } }

/* ----------------------------------------------------------------------- */
/* Awards                                                                  */
/* ----------------------------------------------------------------------- */
.awards { position: relative; background: var(--purple); color: var(--white); padding: calc(150 * var(--u)) var(--pad); overflow: hidden; }
.awards__grid { display: grid; grid-template-columns: calc(600 * var(--u)) 1fr; gap: calc(90 * var(--u)); align-items: start; }
.awards__count { position: sticky; top: calc(150 * var(--u)); }
.awards__cap { font: 800 max(22px, calc(56 * var(--u)))/1 var(--sans); letter-spacing: -.075em; text-transform: uppercase; margin-top: calc(44 * var(--u)); }
.awards__hint { font: 500 max(15px, calc(26 * var(--u)))/1.25 var(--sans); margin-top: calc(22 * var(--u)); max-width: 17em; }
.medal { display: inline-flex; align-items: center; gap: .5em; font: 800 max(12px, calc(20 * var(--u)))/1 var(--cond); letter-spacing: .07em; text-transform: uppercase; padding: .55em .75em .45em; background: var(--navy); }
.medal i { width: .8em; height: .8em; border-radius: 50%; background: var(--mc, var(--yellow)); flex: none; }
.m-grand { --mc: var(--pink); } .m-gold { --mc: var(--yellow); } .m-silver { --mc: #dfe3ee; } .m-bronze { --mc: var(--orange); }

.fest { border-top: max(2px, calc(3.5 * var(--u))) solid var(--white); }
.fest:last-child { border-bottom: max(2px, calc(3.5 * var(--u))) solid var(--white); }
.fest__head { width: 100%; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: calc(26 * var(--u)); padding: calc(30 * var(--u)) calc(14 * var(--u)); text-align: left; position: relative; isolation: isolate; transition: color .25s; }
.fest__head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .4s var(--ease-out); }
.fest__name { font: 800 max(20px, calc(50 * var(--u)))/1 var(--sans); letter-spacing: -.075em; text-transform: uppercase; transition: transform .5s var(--ease-out); }
.fest__sum { display: flex; gap: calc(8 * var(--u)); flex-wrap: wrap; justify-content: flex-end; }
.fest__sum .medal { background: transparent; border: max(1.5px, calc(2.5 * var(--u))) solid currentColor; }
.fest__plus { position: relative; width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 22px; min-height: 22px; transition: transform .5s var(--ease-back); }
.fest__plus::before, .fest__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(3px, calc(7 * var(--u))); margin-top: calc(max(3px, calc(7 * var(--u))) / -2); background: currentColor; }
.fest__plus::after { transform: rotate(90deg); transition: transform .4s var(--ease-out); }
.fest.is-open .fest__plus { transform: rotate(180deg); }
.fest.is-open .fest__plus::after { transform: rotate(0deg); }
.fest__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-io); }
.fest.is-open .fest__body { grid-template-rows: 1fr; }
.fest__inner { overflow: hidden; }
.fest__list { padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(34 * var(--u)); }
.fest__item { display: grid; grid-template-columns: calc(90 * var(--u)) calc(190 * var(--u)) 1fr; gap: calc(18 * var(--u)); align-items: baseline; padding: calc(11 * var(--u)) 0; border-top: 1px solid rgba(255, 255, 255, .25); font: 500 max(13px, calc(23 * var(--u)))/1.2 var(--sans); }
.fest__item b { font: 800 max(12px, calc(21 * var(--u)))/1 var(--cond); letter-spacing: .07em; text-transform: uppercase; }
.fest__item .medal { background: transparent; padding: 0; }
@media (hover: hover) { .fest__head:hover { color: var(--yellow); } .fest__head:hover::before { transform: scaleY(1); } .fest__head:hover .fest__name { transform: translateX(calc(16 * var(--u))); } }

/* ----------------------------------------------------------------------- */
/* Contact                                                                 */
/* ----------------------------------------------------------------------- */
.contact { position: relative; background: var(--pink); color: var(--white); padding: calc(170 * var(--u)) var(--pad) calc(170 * var(--u)); overflow: hidden; text-align: center; }
.contact .stk { font-size: calc(190 * var(--u)); }
.contact__stks { display: flex; justify-content: center; align-items: center; gap: calc(10 * var(--u)); flex-wrap: wrap; }
.contact__kicker { font: 500 max(15px, calc(30 * var(--u)))/1.25 var(--sans); max-width: calc(900 * var(--u)); margin: calc(54 * var(--u)) auto calc(46 * var(--u)); }
.mail {
  position: relative; display: inline-block; font: 800 max(19px, calc(80 * var(--u)))/1.05 var(--sans); letter-spacing: -.075em; text-transform: uppercase;
  color: var(--white); padding: .1em .05em; isolation: isolate; word-break: break-all; transition: color .3s;
}
.mail::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .12em; background: var(--yellow); z-index: -1; transition: height .45s var(--ease-out); }
@media (hover: hover) { .mail:hover { color: var(--navy); } .mail:hover::before { height: 100%; } }
.mail__tip {
  position: absolute; left: 50%; top: -1.9em; transform: translateX(-50%) rotate(-4deg) scale(0); transform-origin: 50% 100%;
  font: 800 max(12px, calc(22 * var(--u)))/1 var(--cond); letter-spacing: .08em; background: var(--navy); color: var(--cyan); padding: .6em .8em .5em; white-space: nowrap;
  transition: transform .45s var(--ease-back); pointer-events: none;
}
.mail.is-copied .mail__tip { transform: translateX(-50%) rotate(-4deg) scale(1); }
.contact__links { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(22 * var(--u)); margin-top: calc(70 * var(--u)); }
.contact__meta { margin-top: calc(70 * var(--u)); font: 800 max(12px, calc(22 * var(--u)))/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: center; gap: 1.4em; flex-wrap: wrap; }
.contact__meta i { font-style: normal; color: var(--yellow); }

/* ----------------------------------------------------------------------- */
/* Footer (como en el editable)                                            */
/* ----------------------------------------------------------------------- */
.footer { position: relative; overflow: hidden; isolation: isolate; background: var(--yellow); color: var(--navy); text-align: center; padding: calc(72 * var(--u)) var(--pad) calc(54 * var(--u)); }
.footer .burst { top: 120%; }
.totop { position: relative; display: inline-flex; align-items: center; isolation: isolate; }
.totop__label {
  display: block; background: var(--pink); color: var(--white);
  font: 800 max(15px, calc(28 * var(--u)))/1 var(--sans); letter-spacing: -.075em; text-transform: uppercase;
  padding: calc(8 * var(--u)) calc(30 * var(--u)) calc(9 * var(--u)) calc(10 * var(--u)); min-height: calc(39.3 * var(--u)); display: flex; align-items: center;
  transform-origin: 100% 50%; transition: transform .5s var(--ease-back);
}
.totop__arrow { display: block; width: calc(64.7 * var(--u)); min-width: 38px; margin-left: calc(-20 * var(--u)); z-index: 1; transition: transform .5s var(--ease-back); }
.totop__arrow svg { width: 100%; height: auto; overflow: visible; }
.totop__arrow path:last-child { transition: transform .5s var(--ease-back); transform-origin: 50% 50%; transform-box: fill-box; }
@media (hover: hover) {
  .totop:hover .totop__label { transform: translate(calc(-36 * var(--u)), calc(-6 * var(--u))) rotate(-2.7deg); }
  .totop:hover .totop__arrow { transform: translate(calc(-36 * var(--u)), calc(-6 * var(--u))); }
  .totop:hover .totop__arrow path:last-child { animation: up .7s var(--ease-io) infinite; }
}
@keyframes up { 0% { transform: translateY(0); } 45% { transform: translateY(-140%); } 46% { transform: translateY(140%); } 100% { transform: translateY(0); } }
.totop__arrow svg { clip-path: circle(50%); }
.footer__social { display: flex; justify-content: center; gap: calc(40 * var(--u)); margin-top: calc(68 * var(--u)); }
.footer__social a { display: block; width: calc(60.6 * var(--u)); min-width: 38px; color: var(--purple); transition: transform .45s var(--ease-back), filter .3s; }
.footer__social svg { width: 100%; height: auto; }
.footer__social .fg, .footer__social .bg { fill: var(--white); }
@media (hover: hover) {
  .footer__social a:hover { transform: translate(-5px, -5px) rotate(-6deg); filter: drop-shadow(6px 6px 0 var(--navy)); }
  .footer__social a:nth-child(2):hover { transform: translate(-5px, -5px) rotate(6deg); filter: drop-shadow(6px 6px 0 var(--pink)); }
}
.footer__note { margin-top: calc(50 * var(--u)); font: 800 max(11px, calc(19 * var(--u)))/1.3 var(--cond); letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; }

/* ----------------------------------------------------------------------- */
/* Caso (overlay a pantalla completa)                                      */
/* ----------------------------------------------------------------------- */
.case { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.case.is-active { visibility: visible; }
.case.is-open { pointer-events: auto; }
.curtain { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.curtain i { position: absolute; inset: 0; transform: translate3d(0, 101%, 0); will-change: transform; }
.curtain i:nth-child(1) { background: var(--yellow); }
.curtain i:nth-child(2) { background: var(--pink); }
.curtain i:nth-child(3) { background: var(--purple); }
.case__scroll { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; background: var(--navy); color: var(--white); opacity: 0; overscroll-behavior: contain; }
.case.is-open .case__scroll { opacity: 1; }
.case__bar {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: calc(22 * var(--u)) var(--pad); pointer-events: none; min-height: 60px;
}
.case__bar > * { pointer-events: auto; }
.case__close { --bg: var(--yellow); --fg: var(--navy); --sh: var(--pink); }
.case__count { font: 800 max(13px, calc(24 * var(--u)))/1 var(--cond); letter-spacing: .08em; background: var(--navy); padding: .5em .7em; border: max(1.5px, calc(2.5 * var(--u))) solid var(--white); font-variant-numeric: tabular-nums; }
.case__progress { position: fixed; left: 0; top: 0; height: max(4px, calc(8 * var(--u))); width: 100%; background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%; z-index: 6; }
.case__hero { padding: calc(70 * var(--u)) var(--pad) calc(90 * var(--u)); display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(90 * var(--u)); align-items: end; }
.case__hero > * { min-width: 0; }
.case__kicker { font: 700 max(12px, calc(24 * var(--u)))/1.1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin-bottom: calc(26 * var(--u)); display: flex; gap: .7em; flex-wrap: wrap; }
.case__kicker span + span::before { content: "✦"; margin-right: .7em; color: var(--pink); }
.case__title { font: 800 max(34px, calc(124 * var(--u)))/.92 var(--sans); letter-spacing: -.08em; text-transform: uppercase; color: var(--yellow); overflow-wrap: break-word; }
.case__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .08em .02em 0; margin-right: -.08em; }
.case__title .w > span { display: inline-block; transform: translate3d(0, 110%, 0) rotate(6deg); transform-origin: 0 100%; }
.case.is-shown .case__title .w > span { transform: none; transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 55ms + .1s); }
.case__desc { font: 500 max(16px, calc(30 * var(--u)))/1.25 var(--sans); margin-bottom: calc(34 * var(--u)); }
.case__facts { display: grid; gap: calc(14 * var(--u)); margin-bottom: calc(34 * var(--u)); }
.case__facts li { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; gap: calc(16 * var(--u)); align-items: baseline; padding-top: calc(14 * var(--u)); border-top: 1px solid rgba(255, 255, 255, .3); font: 500 max(14px, calc(24 * var(--u)))/1.25 var(--sans); }
.case__facts b { font: 800 max(11px, calc(19 * var(--u)))/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--pink); }
.case__facts .tag { margin: 0 .4em .4em 0; color: var(--yellow); }
.case__side > * { opacity: 0; transform: translate3d(0, calc(40 * var(--u)), 0); }
.case.is-shown .case__side > * { opacity: 1; transform: none; transition: opacity .8s var(--ease-out) .35s, transform 1s var(--ease-out) .35s; }

.case__mods { display: grid; gap: calc(26 * var(--u)); padding: 0 var(--pad); justify-items: center; }
.m { width: 100%; opacity: 0; transform: translate3d(0, calc(70 * var(--u)), 0); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.m.is-in { opacity: 1; transform: none; }
.m--img { position: relative; background: rgba(255, 255, 255, .06); overflow: hidden; }
.m--img img, .m--grid img { width: 100%; height: auto; }
.m .is-png, .m.is-png { background: none; }
.m--grid { display: flex; gap: calc(26 * var(--u)); }
.m--grid figure { position: relative; flex: var(--ar) 1 0%; min-width: 0; background: rgba(255, 255, 255, .06); overflow: hidden; }
.m [data-anim]::after, .m[data-anim]::after {
  content: "GIF"; position: absolute; right: calc(14 * var(--u)); top: calc(14 * var(--u));
  font: 800 max(10px, calc(16 * var(--u)))/1 var(--cond); letter-spacing: .1em; background: var(--yellow); color: var(--navy); padding: .45em .6em .38em;
  animation: blink 1s steps(2) infinite;
}
.m .is-playing::after, .m.is-playing::after { display: none; }
@keyframes blink { 50% { opacity: .35; } }
.m--video { position: relative; background: #000; aspect-ratio: var(--ar, 16 / 9); box-shadow: calc(16 * var(--u)) calc(16 * var(--u)) 0 var(--pink); margin: calc(30 * var(--u)) 0 calc(46 * var(--u)); }
.m--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m--mp4 video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: calc(190 * var(--u)); height: calc(190 * var(--u)); min-width: 92px; min-height: 92px;
  margin: calc(-95 * var(--u)) 0 0 calc(-95 * var(--u));
  border-radius: 50%; background: var(--yellow); color: var(--navy);
  border: max(4px, calc(8 * var(--u))) solid var(--navy);
  box-shadow: calc(10 * var(--u)) calc(10 * var(--u)) 0 var(--pink);
  font: 800 max(15px, calc(30 * var(--u)))/1 var(--sans); letter-spacing: -.06em; text-transform: uppercase;
  transform: rotate(-8deg); transition: transform .5s var(--ease-back), box-shadow .3s, background .25s;
}
.play span { display: inline-flex; align-items: center; gap: .3em; }
.play svg { width: .95em; height: .95em; }
.m--mp4::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(20, 0, 41, .28); transition: opacity .4s; pointer-events: none; }
.m--mp4.is-on::before { opacity: 0; }
.m--mp4.is-on .play { display: none; }
@media (hover: hover) { .play:hover { transform: rotate(6deg) scale(1.14); background: var(--cyan); box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--yellow); } }
@media (max-width: 820px) { .play { margin: -46px 0 0 -46px; } }

.m--stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(330 * var(--u)), 1fr)); gap: calc(40 * var(--u)); max-width: 1600px; padding: calc(40 * var(--u)) 0 calc(60 * var(--u)); }
.stat { border-top: max(3px, calc(6 * var(--u))) solid var(--yellow); padding-top: calc(26 * var(--u)); }
.stat b { display: block; font: 800 max(44px, calc(118 * var(--u)))/.9 var(--sans); letter-spacing: -.08em; color: var(--yellow); text-shadow: calc(7 * var(--u)) calc(7 * var(--u)) 0 var(--pink); white-space: nowrap; }
.stat span { display: block; margin-top: calc(22 * var(--u)); font: 700 max(13px, calc(24 * var(--u)))/1.15 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); max-width: 22em; }
.m--quote { position: relative; margin: 0; max-width: calc(1500 * var(--u)); padding: calc(110 * var(--u)) 0 calc(100 * var(--u)); text-align: center; font: 800 max(26px, calc(82 * var(--u)))/1.02 var(--sans); letter-spacing: -.075em; text-transform: uppercase; color: var(--white); }
.m--quote svg { display: block; width: calc(96 * var(--u)); min-width: 44px; margin: 0 auto calc(30 * var(--u)); animation: spin 9s linear infinite; }

.m--audio { max-width: 760px; }
.m--audio iframe { width: 100%; height: 152px; border: 0; }
.m--text { max-width: calc(1180 * var(--u)); padding: calc(50 * var(--u)) 0; font: 500 max(15px, calc(28 * var(--u)))/1.3 var(--sans); }
.m--text p { margin-bottom: .9em; }
.credits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 calc(60 * var(--u)); width: 100%; }
.credits div { padding: calc(15 * var(--u)) 0; border-top: 1px solid rgba(255, 255, 255, .3); display: grid; gap: .3em; }
.credits dt { font: 800 max(11px, calc(18 * var(--u)))/1.1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.credits dd { margin: 0; font: 500 max(14px, calc(25 * var(--u)))/1.2 var(--sans); }
.m--text .btn { margin: .3em .6em .3em 0; --bg: var(--cyan); --fg: var(--navy); --sh: var(--pink); }
.case__end { padding: calc(100 * var(--u)) var(--pad) 0; display: flex; justify-content: center; gap: calc(24 * var(--u)); flex-wrap: wrap; }
.next {
  position: relative; display: block; margin-top: calc(110 * var(--u)); padding: calc(110 * var(--u)) var(--pad) calc(120 * var(--u));
  background: var(--pink); color: var(--white); overflow: hidden; isolation: isolate; text-align: center;
}
.next::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--purple); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transition: clip-path .7s var(--ease-io); }
.next__img { position: absolute; z-index: -1; right: 6%; top: 50%; width: calc(470 * var(--u)); min-width: 170px; aspect-ratio: 202 / 158; object-fit: cover; border: max(4px, calc(10 * var(--u))) solid var(--navy); box-shadow: calc(14 * var(--u)) calc(14 * var(--u)) 0 var(--yellow); transform: translate3d(0, -50%, 0) rotate(8deg) scale(.86); transition: transform .8s var(--ease-back); }
.next__k { font: 800 max(12px, calc(24 * var(--u)))/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; display: inline-flex; gap: .6em; align-items: center; margin-bottom: calc(22 * var(--u)); }
.next__k svg { width: 1.1em; transition: transform .5s var(--ease-back); }
.next__t { font: 800 max(28px, calc(110 * var(--u)))/.95 var(--sans); letter-spacing: -.08em; text-transform: uppercase; max-width: 12em; margin: 0 auto; position: relative; }
@media (hover: hover) {
  .next:hover::before { clip-path: polygon(0 -12%, 100% 0, 100% 100%, 0 100%); }
  .next:hover .next__img { transform: translate3d(0, -50%, 0) rotate(-4deg) scale(1.04); }
  .next:hover .next__k svg { transform: translateX(.5em); }
  .next:hover .next__t { color: var(--yellow); }
}

/* ----------------------------------------------------------------------- */
/* Revelados genéricos                                                     */
/* ----------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translate3d(0, calc(50 * var(--u)), 0); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ----------------------------------------------------------------------- */
/* Responsive                                                              */
/* ----------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --u: calc(100vw / 1400); --pad: calc(80 * var(--u)); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc { grid-template-columns: calc(80 * var(--u)) 1fr calc(260 * var(--u)) calc(100 * var(--u)) calc(50 * var(--u)); }
}
@media (max-width: 820px) {
  :root { --u: calc(100vw / 820); --pad: calc(44 * var(--u)); --nav-h: 56px; --nav-top: 0px; }
  .nav__links { gap: 0; margin-left: -8px; }
  .nav__link { font-size: 15px; padding: .5em .45em; }
  .nav__right { gap: 10px; }
  .social { display: none; }
  .hero { height: calc(100svh - 62px); min-height: 520px; max-height: 190vw; }
  .hero__stage { padding: 18px 18px 54px; }
  .grid { grid-template-columns: 1fr; }
  .card__cap { padding: 18px var(--pad) 24px; }
  .card__meta { font-size: 12px; margin-bottom: 6px; white-space: normal; flex-wrap: wrap; }
  .card__title { font-size: 23px; }
  .grid__more { padding: 36px var(--pad); min-height: 0; }
  .stk { font-size: calc(128 * var(--u)); }
  .contact .stk { font-size: calc(150 * var(--u)); }
  .archive { padding: 80px 0 90px; }
  .sec-head { margin-bottom: 40px; }
  .arc { grid-template-columns: 76px 1fr auto; grid-template-areas: "th t y" "th c y"; gap: 4px 14px; padding: 14px var(--pad); align-items: center; }
  .arc__num, .arc__go { display: none; }
  .arc__thumb { display: block; grid-area: th; width: 76px; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--white); }
  .arc__title { grid-area: t; font-size: 19px; padding-right: 0; align-self: end; }
  .arc__title small { display: none; }
  .arc__cat { grid-area: c; align-self: start; color: var(--pink); }
  .arc__year { grid-area: y; }
  .about { padding: 80px var(--pad); }
  .about__grid { grid-template-columns: 1fr; gap: 44px; }
  .about__left { max-width: 330px; }
  .xp { margin-top: 70px; }
  .xp__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 6px; }
  .xp__role { text-align: left; }
  .awards { padding: 80px var(--pad); }
  .awards__grid { grid-template-columns: 1fr; gap: 50px; }
  .awards__count { position: static; }
  .fest__head { grid-template-columns: 1fr auto; padding: 18px 4px; gap: 10px 14px; }
  .fest__sum { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 6px; }
  .fest__item { grid-template-columns: 48px 1fr; gap: 4px 10px; padding: 10px 0; }
  .fest__item span:last-child { grid-column: 2; }
  .contact { padding: 90px var(--pad); }
  .footer { padding: 54px var(--pad) 34px; }
  .footer__note { justify-content: center; text-align: center; }
  .case__hero { grid-template-columns: 1fr; gap: 30px; padding: 26px var(--pad) 46px; }
  .case__title { font-size: min(11.4vw, 64px); }
  .next__t { font-size: min(9.4vw, 56px); }
  .mail { font-size: min(7.9vw, 46px); word-break: normal; }
  .case__facts li { grid-template-columns: 84px 1fr; }
  .case__mods { gap: 14px; }
  .m--grid { flex-wrap: wrap; gap: 14px; }
  .m--grid figure { flex: 1 1 calc(50% - 7px); }
  .m--grid.is-pair figure, .m--grid.is-tall figure { flex-basis: 100%; }
  .credits { grid-template-columns: 1fr; }
  .next { margin-top: 60px; padding: 70px var(--pad) 80px; }
  .next__img { opacity: .35; right: -8%; }
}
@media (max-width: 420px) {
  .nav__link { font-size: 13px; padding: .5em .36em; }
  .lang { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .row__reveal { clip-path: none !important; }
  .row__meta, .row__title, .row__desc, .row__foot, [data-reveal], .arc, .m { opacity: 1 !important; transform: none !important; transition: none !important; }
  .loader__star, .hero__scroll svg { animation: none; }
}