:root {
  --color-ink: #08040a;
  --color-wood: #160d12;
  --color-soft-white: #f8f1f7;
  --color-lilac: #d8c5ff;
  --color-violet: #9f55ff;
  --color-magenta: #ff4dd8;
  --color-blue: #4fb6ff;
  --glass: rgba(14, 9, 22, 0.62);
  --border-soft: rgba(255, 255, 255, 0.58);
  --border-violet: rgba(221, 190, 255, 0.76);
  --shadow-soft: 0 1rem 2.4rem rgba(0, 0, 0, 0.36);
  --shadow-glow: 0 0 1.3rem rgba(152, 89, 255, 0.22), 0 0 2.2rem rgba(70, 177, 255, 0.12);
  --transition-fast: 260ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-camera: 1000ms cubic-bezier(0.76, 0, 0.24, 1);
  --font-display: "Cormorant Garamond", "Bodoni 72", "Didot", Georgia, serif;
  --font-body: "Avenir Next", "Trebuchet MS", Verdana, sans-serif;
}

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

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--color-wood);
}

body {
  color: var(--color-soft-white);
  font-family: var(--font-body);
}

.horizontal-stage {
  display: flex;
  width: 400vw;
  height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  transform: translate3d(calc(var(--active-panel-index, 0) * -100vw), 0, 0);
  transition: transform var(--transition-camera);
  will-change: transform;
}

.horizontal-stage.is-instant {
  transition-duration: 1ms !important;
}

.panel {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100svh;
  flex: 0 0 100vw;
  overflow: hidden;
}

a {
  color: inherit;
}

.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100svh;
  overflow: visible;
  background:
    radial-gradient(circle at 20% 24%, rgba(134, 67, 255, 0.16), transparent 34rem),
    radial-gradient(circle at 82% 76%, rgba(36, 146, 255, 0.14), transparent 30rem),
    var(--color-wood);
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  isolation: isolate;
  background-image:
    linear-gradient(rgba(5, 3, 6, 0.08), rgba(5, 3, 6, 0.24)),
    url("../bel_assets/assets/Fondo de madera.png");
  background-position: center;
  background-size: cover;
}

.scene::after {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at center, transparent 0 58%, rgba(0, 0, 0, 0.27) 100%),
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.035) 49%, transparent 56%);
  mix-blend-mode: screen;
}

.asset {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: top left;
  filter: drop-shadow(0 1.25rem 1.25rem rgba(0, 0, 0, 0.24));
}

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

.scene-glow {
  position: absolute;
  z-index: 28;
  pointer-events: none;
  border-radius: 999rem;
  filter: blur(1.7rem);
  opacity: 0.55;
}

.scene-glow--index {
  right: 3%;
  bottom: 9%;
  width: 28vw;
  height: 16vh;
  background: radial-gradient(circle, rgba(167, 93, 255, 0.34), transparent 68%);
}

.scene-glow--about {
  left: 42%;
  top: 39%;
  width: 20vw;
  height: 22vh;
  background: radial-gradient(circle, rgba(255, 103, 220, 0.16), transparent 68%);
}

.nav-button,
.folder-link,
.phone-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-button {
  position: absolute;
  z-index: 100;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  min-width: max-content;
  min-height: clamp(2.2rem, 5.2vh, 3.35rem);
  padding: 0.55rem 1.2rem;
  color: var(--color-soft-white);
  font-family: var(--font-display);
  font-size: clamp(0.84rem, 1.75vw, 1.55rem);
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 0.8rem rgba(255, 255, 255, 0.18);
  background: transparent;
  border: 1px solid rgba(124, 101, 88, 0.85);
  color: rgba(124, 101, 88, 0.95);
  box-shadow: none;
  text-shadow: none;
  backdrop-filter: none;
  border-radius: 0.72rem;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.nav-button::before,
.folder-link::before,
.phone-button::before {
  position: absolute;
  inset: 0.1rem 0.18rem auto;
  height: 42%;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent);
  opacity: 0.72;
}

.nav-button:hover,
.folder-link:hover,
.phone-button:hover {
  transform: translateY(-0.13rem) scale(1.015);
  border-color: rgba(245, 233, 255, 0.96);
  box-shadow:
    0 1.1rem 2rem rgba(0, 0, 0, 0.42),
    0 0 1.55rem rgba(167, 90, 255, 0.3),
    0 0 1.2rem rgba(68, 180, 255, 0.18);
}

.nav-button:focus-visible,
.folder-link:focus-visible,
.phone-button:focus-visible {
  outline: 0.18rem solid rgba(255, 255, 255, 0.9);
  outline-offset: 0.18rem;
}

.nav-button--back {
  font-size: clamp(0.72rem, 1.05vw, 1rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.01) 50%),
    rgba(6, 4, 10, 0.56);
  border-color: rgba(124, 101, 88, 0.85);
}

/* Index */
.asset--keyboard {
  z-index: 8;
  transform: translate(-12.5%, -10%) scale(1);
}

.asset--graphic-tablet {
  z-index: 4;
  transform: translate(25%, -50%) scale(1.1);
}

.asset--index-drawings {
  z-index: 1;
  object-fit: contain;
  transform: translate(1%, -22%) scale(1.22);
}

.asset--color-wheel {
  z-index: 1;
  transform: translate(-19%, -20%) scale(1.2);
}

.asset--index-notebook {
  z-index: 30;
  object-fit: contain;
  transform: translate(49.88%, 0%) scale(1);
}

.nav-button--index {
  --x: 87.5%;
  --y: 80.7%;
  --w: 9%;
}

/* Sobre mi */
.asset--about-notebook {
  z-index: 5;
  transform: translate(-50%, 0%) scale(1);
}

.asset--graphic-tablet-sobremi {
  z-index: 4;
  transform: translate(-65%, -30%) scale(1);
}

.asset--camera {
  z-index: 20;
  transform: translate(-34%, -40%) scale(1);
}

.asset--photo {
  z-index: 16;
}

.asset--photo-dog {
  z-index: 20;
  transform: translate(2%, -2%) scale(1);
}

.asset--photo-adoption {
  transform: translate(5%, -4%) scale(0.98);
}

.asset--photo-cupcakes {
  z-index: 29;
  transform: translate(3%, -1%) scale(0.95);
}

.asset--photo-podcast {
  z-index: 20;
  transform: translate(4%, -3%) scale(1);
}

.asset--photo-dental {
  transform: translate(2%, 0%) scale(0.94);
}

.asset--photo-dragon {
  transform: translate(2%, 1%) scale(0.96);
}

.asset--photo-bouquet {
  z-index: 18;
  transform: translate(2%, 0%) scale(0.96);
}

.asset--note {
  z-index: 30;
  filter: drop-shadow(0 0.85rem 0.75rem rgba(0, 0, 0, 0.32));
}

.asset--note-edition {
  transform: translate(2%, -1%) scale(1);
}

.asset--note-photo {
  transform: translate(2%, -2%) scale(1);
}

.asset--note-recording {
  transform: translate(3%, -2%) scale(1);
}

.asset--note-color {
  transform: translate(3%, -2%) scale(1);
}

.asset--note-direction {
  transform: translate(5%, -1%) scale(1);
}

.asset--note-vfx {
  transform: translate(-1%, -2%) scale(1);
}

.asset--note-illustration {
  transform: translate(-1%, 0%) scale(1);
}

.asset--note-planning {
  transform: translate(0%, -3%) scale(1);
}

.asset--cartel-sobremi {
  overflow: hidden;
  z-index: 1;
  transform: translate(1%, -40%) scale(2.2) rotate(-10deg);
}

.about-title {
  position: absolute;
  z-index: 29;
  left: 50.6%;
  top: 47.5%;
  color: rgba(219, 203, 214, 0.52);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 0.96;
  text-align: center;
  text-shadow: 0 0 1rem rgba(255, 255, 255, 0.12);
  transform: translate(-50%, -50%);
}

.nav-button--about-back {
  --x: 23.3%;
  --y: 89.2%;
  --w: 11.5%;
}

.nav-button--about-next {
  --x: 62.2%;
  --y: 88.2%;
  --w: 11.5%;
}

/* Portafolio */
.portfolio-paper-strip {
  position: absolute;
  left: -5%;
  bottom: -15%;
  z-index: 1;
  width: 66%;
  height: 32%;
  pointer-events: none;
  background:
    linear-gradient(130deg, rgba(255, 224, 64, 0.78) 0 28%, transparent 28%),
    linear-gradient(55deg, rgba(51, 174, 255, 0.8) 0 46%, transparent 46%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.25) 0 0.16rem, transparent 0.16rem 0.42rem);
  clip-path: polygon(0 8%, 95% 0, 100% 100%, 4% 100%);
  opacity: 0.82;
  transform: rotate(-2deg);
}

.asset--ipad {
  z-index: 8;
  transform: translate(-14%, 0%) scale(1);
}

.asset--cartel-ceuni-portafolio {
  z-index: 1;
  transform: translate(-99%, -40%) scale(2.2) rotate(-10deg);
}

.asset--apple-pencil {
  z-index: 50;
  transform: translate(22%, 1%) scale(1);
}

.tablet-copy {
  position: absolute;
  z-index: 21;
  left: 18.9%;
  top: 31.8%;
  width: 42%;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.82rem, 1.55vw, 1.35rem);
  font-weight: 300;
  line-height: 0.92;
  text-align: center;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.68);
}

.tablet-copy p {
  margin: 0;
}

.folder-grid {
  position: absolute;
  z-index: 24;
  left: 11.5%;
  top: 50.5%;
  display: grid;
  width: 56%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 8vw, 7.4rem);
}

.folder-link {
  position: relative;
  min-height: clamp(4.5rem, 28vh, 9.7rem);
  padding: 1rem 1.15rem 0.75rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.82rem, 1.55vw, 1.35rem);
  line-height: 0.96;
  text-align: center;
  background: url("../bel_assets/assets/Elementos_Carpeta.png") center / 112% 112% no-repeat;
  background-size: 250% auto;
  background-position: center 55%;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  cursor: pointer;
  
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.folder-link::before {
  display: none;
}

.folder-link::after {
  content: "";
  display: none;
}

.folder-link:hover {
  transform: scale(1.03);
  border-color: transparent;
  box-shadow: none;
}

.programs-title {
  position: absolute;
  
  z-index: 32;
  left: 78.7%;
  top: 3.2%;
  color: rgba(222, 204, 216, 0.62);
  font-size: clamp(1.1rem, 2.45vw, 2.05rem);
  line-height: 0.86;
  text-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.6);
}

.asset--program {
  z-index: 34;
  transform: translate(35%, -5%) scale(1);
}

.asset--program-ae,
.asset--program-lr,
.asset--program-pr,
.asset--program-davinci {
  z-index: 35;
}

.nav-button--portfolio-back {
  --x: 80.4%;
  --y: 88.7%;
  --w: 12.5%;
}

.nav-button--portfolio-next {
  --x: 77.5%;
  --y: 78.4%;
  --w: 18.6%;
}

.portfolio-expand {
  position: absolute;
  inset: 0;
  z-index: 180;
  display: grid;
  padding: clamp(0.55rem, 1.8vw, 1.4rem);
  overflow: hidden;
  place-items: center;
  pointer-events: none;
  visibility: hidden;
  background: #000;
  opacity: 0;
  transition:
    opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-expand.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.portfolio-expand__device {
  width: min(96vw, calc(92svh * 1.777));
  aspect-ratio: 16 / 9;
  opacity: 0;
  transform: translate(-18vw, 4vh) scale(0.36);
  transform-origin: 36% 58%;
  transition:
    transform 780ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease;
  will-change: transform, opacity;
}

.portfolio-expand.is-open .portfolio-expand__device {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.portfolio-expand__bezel {
  display: grid;
  width: 100%;
  height: 100%;
  padding: clamp(0.55rem, 1.4vw, 1.25rem);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.17), transparent 18%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.08), transparent 28%),
    #09080d;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: clamp(1.2rem, 3vw, 2.6rem);
  box-shadow:
    0 2rem 5rem rgba(0, 0, 0, 0.72),
    inset 0 0 0 0.18rem rgba(255, 255, 255, 0.05);
}

.portfolio-expand__screen {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 36%),
    radial-gradient(circle at 12% 0%, rgba(216, 197, 255, 0.14), transparent 24rem),
    linear-gradient(180deg, rgba(22, 12, 27, 0.98), rgba(7, 5, 9, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: clamp(0.65rem, 1.7vw, 1.45rem);
}

.portfolio-viewbar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.6rem, 1.5vw, 1rem) clamp(0.8rem, 2vw, 1.45rem);
  background: rgba(5, 4, 8, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(0.75rem);
  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast);
}

.portfolio-expand__screen.has-inner-viewer-open .portfolio-viewbar,
.portfolio-expand__screen.has-inner-viewer-open .portfolio-close {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.portfolio-viewbar__copy {
  min-width: 0;
}

.portfolio-viewbar__eyebrow {
  margin: 0 0 0.15rem;
  color: rgba(216, 197, 255, 0.68);
  font-size: clamp(0.56rem, 1.2vw, 0.78rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.portfolio-viewbar h2 {
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.8rem);
  font-weight: 500;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-close,
.portfolio-inner-close {
  display: inline-grid;
  flex: 0 0 auto;
  width: clamp(2.1rem, 4.5vw, 3rem);
  height: clamp(2.1rem, 4.5vw, 3rem);
  padding: 0;
  place-items: center;
  color: rgba(255, 255, 255, 0.96);
  font: 300 clamp(1.6rem, 3.6vw, 2.35rem) / 1 var(--font-body);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03)),
    rgba(8, 6, 12, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999rem;
  box-shadow: 0 0.75rem 1.7rem rgba(0, 0, 0, 0.36);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.portfolio-close:hover,
.portfolio-inner-close:hover {
  transform: translateY(-0.08rem) scale(1.04);
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 0.9rem 2rem rgba(0, 0, 0, 0.42),
    0 0 1.1rem rgba(216, 197, 255, 0.2);
}

.portfolio-close:focus-visible,
.portfolio-inner-close:focus-visible,
.portfolio-card:focus-visible,
.manual-file:focus-visible,
.video-card:focus-visible {
  outline: 0.16rem solid rgba(255, 255, 255, 0.9);
  outline-offset: 0.18rem;
}

.portfolio-expanded-content {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.panel--portafolio .asset--ipad,
.panel--portafolio .tablet-copy,
.panel--portafolio .folder-grid {
  transition:
    opacity 320ms ease,
    scale 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--transition-fast);
}

.panel--portafolio.is-portfolio-expanded .asset--ipad {
  opacity: 0;
  scale: 1.04;
}

.panel--portafolio.is-portfolio-expanded .tablet-copy,
.panel--portafolio.is-portfolio-expanded .folder-grid {
  pointer-events: none;
  opacity: 0;
}

.portfolio-section {
  min-height: 100%;
  padding: clamp(0.8rem, 2vw, 1.5rem);
}

.portfolio-empty {
  display: grid;
  min-height: 100%;
  place-items: center;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(0.82rem, 1.5vw, 1rem);
  text-align: center;
}

.portfolio-card,
.video-card {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  appearance: none;
}

.portfolio-section--campaigns {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.55rem, 1.35vw, 1rem);
}

.campaign-carousel {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.45rem, 1.1vw, 0.8rem);
}

.campaign-carousel__stage {
  position: relative;
  min-height: clamp(15rem, 52svh, 34rem);
  overflow: visible;
  isolation: isolate;
  perspective: 80rem;
}

.campaign-carousel__stage::before {
  position: absolute;
  inset: 10% 6% 2%;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  opacity: 0.7;
}

.campaign-frame {
  --card-left: 50%;
  --card-top: 50%;
  --card-width: 38%;
  --card-scale: 1;
  --card-rotate: 0deg;
  --card-opacity: 1;
  --card-brightness: 1;
  --card-saturation: 1;
  --card-lift: 0rem;

  position: absolute;
  left: var(--card-left);
  top: var(--card-top);
  z-index: 1;
  gap: 0.65rem;
  width: var(--card-width);
  overflow: visible;
  opacity: var(--card-opacity);
  filter: brightness(var(--card-brightness)) saturate(var(--card-saturation));
  transform: translate(-50%, calc(-50% + var(--card-lift))) scale(var(--card-scale)) rotate(var(--card-rotate));
  transform-origin: center;
  transition:
    left 620ms cubic-bezier(0.22, 1, 0.36, 1),
    top 620ms cubic-bezier(0.22, 1, 0.36, 1),
    width 620ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 360ms ease,
    filter 360ms ease,
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: left, top, width, opacity, filter, transform;
}

.campaign-frame.is-front-left {
  --card-left: 30%;
  --card-top: 55%;
  --card-width: min(38%, 28rem);
  --card-scale: 1;
  --card-rotate: -1.2deg;
  z-index: 4;
}

.campaign-frame.is-front-right {
  --card-left: 70%;
  --card-top: 55%;
  --card-width: min(38%, 28rem);
  --card-scale: 1;
  --card-rotate: 1.2deg;
  z-index: 4;
}

.campaign-frame.is-back-left {
  --card-left: 43%;
  --card-top: 32%;
  --card-width: min(27%, 19rem);
  --card-scale: 0.82;
  --card-rotate: 1.8deg;
  --card-opacity: 0.7;
  --card-brightness: 0.68;
  --card-saturation: 0.82;
  z-index: 2;
}

.campaign-frame.is-back-right {
  --card-left: 57%;
  --card-top: 32%;
  --card-width: min(27%, 19rem);
  --card-scale: 0.82;
  --card-rotate: -1.8deg;
  --card-opacity: 0.7;
  --card-brightness: 0.68;
  --card-saturation: 0.82;
  z-index: 2;
}

.campaign-frame.is-hidden {
  --card-left: 50%;
  --card-top: 34%;
  --card-width: min(22%, 16rem);
  --card-scale: 0.62;
  --card-opacity: 0;
  --card-brightness: 0.46;
  --card-saturation: 0.7;
  z-index: 1;
  pointer-events: none;
}

.campaign-frame:hover {
  --card-lift: -0.35rem;
}

.campaign-frame.is-back-left:hover,
.campaign-frame.is-back-right:hover {
  --card-opacity: 0.78;
  --card-brightness: 0.75;
}

.campaign-frame__art {
  position: relative;
  display: block;
  aspect-ratio: 1.42 / 1;
  padding: clamp(0.45rem, 1.1vw, 0.7rem);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(239, 225, 197, 0.95), rgba(121, 92, 61, 0.96)),
    #86623c;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 0 0 0.28rem rgba(44, 25, 18, 0.42),
    inset 0 0 0 0.52rem rgba(255, 255, 255, 0.12),
    0 1.25rem 2rem rgba(0, 0, 0, 0.38);
  transition:
    box-shadow 360ms ease,
    border-color 360ms ease;
}

.campaign-frame.is-front-left .campaign-frame__art,
.campaign-frame.is-front-right .campaign-frame__art {
  box-shadow:
    inset 0 0 0 0.28rem rgba(44, 25, 18, 0.42),
    inset 0 0 0 0.55rem rgba(255, 255, 255, 0.14),
    0 1.5rem 2.6rem rgba(0, 0, 0, 0.48),
    0 0 1.4rem rgba(216, 197, 255, 0.12);
}

.campaign-frame__preview {
  display: block;
  width: calc(100% + 1.25rem);
  height: calc(100% + 1.25rem);
  background: rgba(248, 241, 247, 0.9);
  border: 0;
  clip-path: inset(0 1.2rem 1.2rem 0);
  pointer-events: none;
  transform: translate(-0.18rem, -0.18rem);
}

.campaign-frame__label,
.video-card__label {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(0.72rem, 1.35vw, 0.98rem);
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-carousel__controls {
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 4vw, 3.4rem);
  padding-bottom: clamp(0.15rem, 0.7vw, 0.45rem);
}

.campaign-carousel__arrow {
  display: inline-grid;
  width: clamp(2.65rem, 5vw, 3.45rem);
  height: clamp(2.65rem, 5vw, 3.45rem);
  padding: 0;
  place-items: center;
  color: rgba(255, 255, 255, 0.94);
  font: 400 clamp(1.55rem, 3vw, 2.25rem) / 1 var(--font-display);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
    rgba(8, 6, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999rem;
  box-shadow:
    0 0.75rem 1.5rem rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

.campaign-carousel__arrow:hover {
  transform: translateY(-0.12rem) scale(1.05);
  border-color: rgba(216, 197, 255, 0.72);
  box-shadow:
    0 0.95rem 1.8rem rgba(0, 0, 0, 0.42),
    0 0 1.2rem rgba(216, 197, 255, 0.2);
}

.campaign-carousel__arrow:focus-visible {
  outline: 0.16rem solid rgba(255, 255, 255, 0.9);
  outline-offset: 0.18rem;
}

.campaign-carousel__arrow:disabled {
  cursor: default;
  opacity: 0.42;
  transform: none;
  box-shadow: none;
}

.manual-explorer {
  display: grid;
  min-height: 100%;
  gap: clamp(0.65rem, 1.4vw, 1rem);
}

.manual-explorer__sidebar {
  display: flex;
  min-width: 0;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0 0 0.3rem;
}

.manual-file {
  display: inline-flex;
  min-width: min(12rem, 68vw);
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: clamp(0.72rem, 1.25vw, 0.92rem);
  text-align: left;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.45rem;
  cursor: pointer;
}

.manual-file::before {
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.75rem;
  place-items: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  content: "PDF";
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.2rem;
}

.manual-file.is-selected {
  color: #fff;
  background: rgba(216, 197, 255, 0.2);
  border-color: rgba(216, 197, 255, 0.58);
  box-shadow: inset 0.18rem 0 0 rgba(255, 77, 216, 0.58);
}

.manual-file__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-explorer__viewer,
.portfolio-inner-body {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: rgba(248, 241, 247, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.55rem;
}

.portfolio-pdf,
.portfolio-video-full {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(15rem, 52svh, 40rem);
  background: #0a080d;
  border: 0;
}

.campaign-pdf-viewer {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.5rem, 1.2vw, 0.8rem);
  padding: clamp(0.48rem, 1.25vw, 0.85rem);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(16, 13, 20, 0.98), rgba(8, 7, 11, 0.98)),
    #0d0a11;
}

.campaign-pdf-viewer__canvas-wrap {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: clamp(0.1rem, 1.25vmin, 0.95rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(244, 239, 247, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.5rem;
}

.campaign-pdf-viewer__canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: #fff;
  border-radius: 0.18rem;
  box-shadow:
    0 1.1rem 2.2rem rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(22, 17, 26, 0.12);
}

.campaign-pdf-viewer__controls {
  display: flex;
  min-width: 0;
  min-height: clamp(2.25rem, 4.8vw, 3rem);
  align-items: center;
  justify-content: center;
  gap: clamp(0.45rem, 1.15vw, 0.72rem);
  overflow: hidden;
}

.campaign-pdf-viewer__arrow {
  display: inline-grid;
  flex: 0 0 auto;
  width: clamp(2.15rem, 4.4vw, 2.85rem);
  height: clamp(2.15rem, 4.4vw, 2.85rem);
  padding: 0;
  place-items: center;
  color: rgba(255, 255, 255, 0.95);
  font: 500 1.45rem / 1 var(--font-display);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(12, 9, 16, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999rem;
  box-shadow:
    0 0.7rem 1.25rem rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

.campaign-pdf-viewer__arrow:hover:not(:disabled) {
  transform: translateY(-0.08rem);
  border-color: rgba(239, 225, 197, 0.72);
  box-shadow:
    0 0.9rem 1.45rem rgba(0, 0, 0, 0.36),
    0 0 1rem rgba(239, 225, 197, 0.18);
}

.campaign-pdf-viewer__arrow:focus-visible {
  outline: 0.15rem solid rgba(255, 255, 255, 0.9);
  outline-offset: 0.16rem;
}

.campaign-pdf-viewer__arrow:disabled {
  cursor: default;
  opacity: 0.34;
  transform: none;
  box-shadow: none;
}

.campaign-pdf-viewer__counter {
  min-width: min(8.8rem, 42vw);
  max-width: 100%;
  padding: 0.5rem 0.72rem;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.86rem;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.42rem;
}

.video-masonry {
  columns: 2 10rem;
  column-gap: clamp(0.65rem, 1.6vw, 1rem);
}

.video-card {
  width: 100%;
  margin: 0 0 clamp(0.65rem, 1.6vw, 1rem);
  break-inside: avoid;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 1rem 1.8rem rgba(0, 0, 0, 0.26);
}

.video-card:nth-child(3n + 1) {
  aspect-ratio: 9 / 13;
}

.video-card:nth-child(3n + 2) {
  aspect-ratio: 9 / 16;
}

.video-card:nth-child(3n) {
  aspect-ratio: 1 / 1.28;
}

.video-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #08060a;
}

.video-card__label {
  position: absolute;
  right: 0.55rem;
  bottom: 0.5rem;
  left: 0.55rem;
  padding: 0.4rem 0.5rem;
  background: rgba(0, 0, 0, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.45rem;
  backdrop-filter: blur(0.5rem);
}

.portfolio-inner-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto 1fr;
  gap: clamp(0.65rem, 1.4vw, 1rem);
  padding: clamp(0.8rem, 2vw, 1.35rem);
  background: rgba(0, 0, 0, 0.94);
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity 240ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-inner-modal.is-open {
  opacity: 1;
  transform: scale(1);
}

.portfolio-inner-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.portfolio-inner-header h3 {
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-inner-body {
  height: 100%;
}

.portfolio-video-full {
  object-fit: contain;
}

@media (min-width: 720px) {
  .manual-explorer {
    grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 1fr);
  }

  .manual-explorer__sidebar {
    display: grid;
    align-content: start;
    overflow-x: visible;
    overflow-y: auto;
    padding: 0.35rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.65rem;
  }

  .manual-file {
    width: 100%;
    min-width: 0;
  }
}

@media (min-width: 1024px) {
  .portfolio-section {
    padding: clamp(1rem, 2vw, 1.8rem);
  }

  .video-masonry {
    columns: 3 11rem;
  }
}

/* Contacto */
.asset--iphone {
  z-index: 8;
  transform: translate(-28%, 0%) scale(1);
}

.asset--portrait {
  z-index: 10;
  transform: translate(12%, 1%) scale(1);
}

.asset--character {
  z-index: 18;
  transform: translate(-4%, 1%) scale(0.98);
}

.asset--pen {
  z-index: 22;
  transform: translate(25%, 23%) scale(1);
}

.phone-ui {
  position: absolute;
  z-index: 26;
  left: 14.9%;
  top: 32.2%;
  width: 14%;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  text-shadow: 0 0 0.9rem rgba(0, 0, 0, 0.6);
}

.phone-ui h2 {
  margin: 0 0 1.05rem;
  font-size: clamp(0.95rem, 1.95vw, 1.55rem);
  font-weight: 300;
  letter-spacing: 0.34em;
}

.phone-button {
  position: relative;
  width: 100%;
  min-height: clamp(2rem, 6.2vh, 3.1rem);
  margin-bottom: clamp(0.65rem, 2vh, 1.05rem);
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.72rem, 1.24vw, 1rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02) 52%),
    rgba(14, 11, 24, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(0.5rem);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.phone-button span {
  margin-left: 0.75rem;
  font-size: 1.2em;
}

.phone-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
}

.phone-button__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.contact-icons {
  display: flex;
  justify-content: space-between;
  margin: clamp(0.9rem, 4vh, 1.8rem) auto clamp(0.75rem, 2.2vh, 1.1rem);
  padding-inline: 0.4rem;
  font-size: clamp(1.1rem, 2.6vw, 2.1rem);
  line-height: 1;
}

.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-icon-button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  appearance: none;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-icon-button:hover {
  transform: scale(1.2);
}

.contact-icon-button:focus-visible {
  outline: 0.12rem solid rgba(255, 255, 255, 0.9);
  outline-offset: 0.12rem;
}

.contact-icon--tiktok {
  width: 1em;
  height: 1em;
}

.contact-icon--tiktok svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

.phone-ui p {
  margin: 0 0 clamp(0.55rem, 1.45vh, 0.8rem);
  font-size: clamp(0.58rem, 1.05vw, 0.82rem);
  line-height: 1.22;
}

.phone-number {
  font-size: clamp(0.72rem, 1.2vw, 0.95rem) !important;
}

.nav-button--contact-back {
  --x: 78.5%;
  --y: 83.2%;
  --w: 17.4%;
}

@media (min-width: 1440px) {
  .nav-button {
    font-size: clamp(1rem, 1.55vw, 1.7rem);
  }

  .folder-grid {
    gap: clamp(4rem, 8.2vw, 8rem);
  }
}

@media (max-aspect-ratio: 4 / 3) {
  .asset {
    width: 132vh;
    height: 100vh;
  }

  .asset--keyboard {
    transform: translate(-18%, 0%) scale(0.98);
  }

  .asset--index-notebook {
    transform: translate(28%, 6%) scale(1.08);
  }

  .asset--about-notebook {
    transform: translate(-62%, 10%) scale(1.08);
  }

  .asset--camera {
    transform: translate(-50%, -12%) scale(1.1);
  }

  .folder-grid {
    left: 7%;
    width: 68%;
    gap: 1rem;
  }

  .programs-title {
    left: 76%;
  }

  .phone-ui {
    left: 8.5%;
    width: 18%;
  }
}

@media (max-width: 760px) {
  .nav-button {
    min-height: 2.15rem;
    padding-inline: 0.85rem;
    font-size: clamp(0.72rem, 3.8vw, 1rem);
  }

  .nav-button--about-back,
  .nav-button--portfolio-back {
    --w: 16%;
  }

  .nav-button--portfolio-next,
  .nav-button--contact-back {
    --w: 24%;
  }

  .folder-grid {
    top: 48%;
    grid-template-columns: 1fr;
    width: 24%;
    gap: 0.6rem;
  }

  .folder-link {
    min-height: 2.6rem;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Mover grupo visual de Sobre mí hacia la derecha */
.panel--sobre-mi .asset--photo,
.panel--sobre-mi .asset--note,
.panel--sobre-mi .about-title {
  translate: 6vw 0;
}

.panel--sobre-mi .nav-button--about-back,
.panel--sobre-mi .nav-button--about-next {
  translate: 6vw 0;
}

.panel--inicio {
  z-index: 5;
}

.panel--sobre-mi {
  z-index: 4;
}

.panel--portafolio {
  z-index: 5;
}

/* Grow para assets */

.asset {
  transition: scale 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asset.is-asset-hovered {
  scale: 1.05;
}

/* Hitbox Index */

.asset-hitbox {
  position: absolute;
  z-index: 120;
  pointer-events: auto;
  cursor: default;
  background: none;
}

/* Solo para debug mientras acomodas */

/* .asset-hitbox {
  background: rgba(255, 0, 0, 0.2);
} */

/*Hitboxes index*/

.hitbox--keyboard {
  left: -10%;
  top: -10%;
  width: 58%;
  height: 58%;
  transform: rotate(-30deg);
}

.hitbox--graphic-tablet {
  left: 59%;
  top: -14%;
  width: 39%;
  height: 35%;
  transform: rotate(16deg);
}

.hitbox--index-drawings {
  left: 26%;
  top: 36%;
  width: 64%;
  height: 95%;
  transform: rotate(85deg);
}

/* === HOVER GRUPAL REAL: NOTEBOOK INDEX + BOTÓN === */

.hitbox--index-notebook {
  left: 80%;
  top: 42%;
  width: 22%;
  height: 55%;
  z-index: 90;
  pointer-events: auto;
  transform: rotate(0deg);
}

/* Notebook: usa scale porque no toca su transform original */
.panel--inicio.is-index-notebook-group-hovered .asset--index-notebook {
  scale: 1.015;
}

/* Botón: usa transform porque el botón ya trabaja con transform en hover */
.panel--inicio.is-index-notebook-group-hovered .nav-button--index {
  transform: translate(2.35rem, -0.15rem) scale(1.015);
  border-color: rgba(245, 233, 255, 0.96);
  box-shadow:
    0 1.1rem 2rem rgba(0, 0, 0, 0.42),
    0 0 1.55rem rgba(167, 90, 255, 0.3),
    0 0 1.2rem rgba(68, 180, 255, 0.18);
}

.asset--index-notebook,
.nav-button--index {
  transition:
    scale 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  will-change: scale, transform;
}

.hitbox--color-wheel {
  left: -5%;
  top: 80%;
  width: 46%;
  height: 42%;
  transform: rotate(35deg);
}

/*Hitboxes sobre mi*/

.hitbox--index-notebook {
  left: 80%;
  top: 42%;
  width: 22%;
  height: 55%;
  transform: rotate(0deg);
}

.hitbox--index-notebook-from-about {
  left: -10%;
  top: 38%;
  z-index: 121;
  width: 34%;
  height: 58%;
  cursor: zoom-in;
  transform: rotate(0deg);
}

.site[data-active-panel="sobre-mi"] #inicio .hitbox--index-notebook {
  pointer-events: auto;
}

.hitbox--camera {
  left: 6%;
  top: 5%;
  width: 22%;
  height: 30%;
  transform: rotate(-18deg);
}

.hitbox--graphic-tablet-sobremi {
  left: -5%;
  top: 0%;
  width: 8%;
  height: 42%;
  transform: rotate(18deg);
}

.hitbox--photo-dog {
  left: 32%;
  top: 8%;
  width: 24%;
  height: 28%;
  transform: rotate(-8deg);
}

.hitbox--photo-adoption {
  left: 51%;
  top: 0%;
  width: 26%;
  height: 27%;
  transform: rotate(6deg);
}

.hitbox--photo-cupcakes {
  left: 29%;
  top: 33%;
  width: 18%;
  height: 28%;
  transform: rotate(6deg);
}

.hitbox--photo-podcast {
  left: 68%;
  top: 25%;
  width: 18%;
  height: 28%;
  transform: rotate(2deg);
}

.hitbox--photo-dental {
  left: 28%;
  top: 62%;
  width: 24%;
  height: 26%;
  transform: rotate(14deg);
}

.hitbox--photo-dragon {
  left: 61%;
  top: 52%;
  width: 22%;
  height: 28%;
  transform: rotate(-10deg);
}

.hitbox--photo-bouquet {
  left: 48%;
  top: 66%;
  width: 18%;
  height: 28%;
  transform: rotate(-6deg);
}

.hitbox--note-edition {
  left: 46%;
  top: 30%;
  width: 6%;
  height: 14%;
  transform: rotate(3deg);
}

.hitbox--note-photo {
  left: 52%;
  top: 24%;
  width: 7%;
  height: 12%;
  transform: rotate(-14deg);
}

.hitbox--note-recording {
  left: 60.3%;
  top: 25%;
  width: 6%;
  height: 12%;
  transform: rotate(10deg);
}

.hitbox--note-color {
  left: 65.2%;
  top: 33%;
  width: 6%;
  height: 12%;
  transform: rotate(4deg);
}

.hitbox--note-direction {
  left: 66.6%;
  top: 46%;
  width: 6%;
  height: 12%;
  transform: rotate(4deg);
}

.hitbox--note-vfx {
  left: 43.9%;
  top: 55.5%;
  width: 5.5%;
  height: 12%;
  transform: rotate(10deg);
}

.hitbox--note-illustration {
  left: 49.4%;
  top: 62.4%;
  width: 6%;
  height: 12%;
  transform: rotate(7deg);
}

.hitbox--note-planning {
  left: 58.5%;
  top: 55.5%;
  width: 6%;
  height: 12%;
  transform: rotate(-13deg);
}

/*Hitboxes portafolio*/

.hitbox--apple-pencil {
  left: 70%;
  top: 7%;
  z-index: 90;
  width: 3.4%;
  height: 85%;
  transform: rotate(-9deg);
}

.hitbox--cartel-ceuni-portafolio {
  left: -6%;
  top: -4%;
  width: 20%;
  height: 100%;
  transform: rotate(-10deg);
}

.hitbox--program-ps {
  left: 84.2%;
  top: 13.7%;
  z-index: 90;
  width: 6%;
  height: 12%;
  transform: rotate(9deg);
}

.hitbox--program-ae {
  left: 77.7%;
  top: 20.7%;
  z-index: 90;
  width: 6%;
  height: 12%;
  transform: rotate(5deg);
}

.hitbox--program-ai {
  left: 84.2%;
  top: 28.5%;
  z-index: 90;
  width: 6%;
  height: 12%;
  transform: rotate(4deg);
}

.hitbox--program-lr {
  left: 77.4%;
  top: 35.1%;
  z-index: 90;
  width: 6%;
  height: 12%;
  transform: rotate(-11deg);
}

.hitbox--program-id {
  left: 85.6%;
  top: 41.8%;
  z-index: 90;
  width: 6%;
  height: 12%;
  transform: rotate(5deg);
}

.hitbox--program-pr {
  left: 78.6%;
  top: 48.5%;
  z-index: 90;
  width: 6%;
  height: 12%;
  transform: rotate(9deg);
}

.hitbox--program-capcut {
  left: 86.1%;
  top: 55.5%;
  z-index: 90;
  width: 6%;
  height: 12%;
  transform: rotate(-12deg);
}

.hitbox--program-davinci {
  left: 79.9%;
  top: 63%;
  z-index: 90;
  width: 6%;
  height: 12%;
  transform: rotate(4deg);
}

/*Hitboxes contacto*/

.hitbox--portrait {
  left: 53.5%;
  top: 17%;
  width: 24%;
  height: 73%;
  transform: rotate(7deg);
}

.hitbox--character {
  left: 31%;
  top: 15%;
  width: 28%;
  height: 75%;
  transform: rotate(-2deg);
}

.hitbox--pen {
  left: 74.8%;
  top: 55%;
  width: 3%;
  height: 42%;
  transform: rotate(29deg);
}

.notebook-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.notebook-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.notebook-lightbox__image {
  display: block;
  width: auto;
  max-width: min(146vw, 146rem);
  height: auto;
  max-height: 146vh;
  object-fit: contain;
  filter: drop-shadow(0 1.8rem 2.8rem rgba(0, 0, 0, 0.55));
  transform: scale(0.995);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  translate: -35vh -60vh;
}

.notebook-lightbox.is-open .notebook-lightbox__image {
  transform: scale(1);
}

.notebook-lightbox__close {
  position: absolute;
  top: clamp(0.9rem, 2.4vw, 1.6rem);
  right: clamp(0.9rem, 2.4vw, 1.6rem);
  z-index: 1;
  display: inline-grid;
  width: clamp(2.5rem, 4.5vw, 3.4rem);
  height: clamp(2.5rem, 4.5vw, 3.4rem);
  padding: 0;
  place-items: center;
  color: rgba(255, 255, 255, 0.95);
  font: 300 clamp(2rem, 4vw, 2.8rem) / 1 var(--font-body);
  background: rgba(5, 3, 8, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999rem;
  cursor: pointer;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.36);
}

.notebook-lightbox__close:hover {
  transform: scale(1.06);
}

.notebook-lightbox__close:focus-visible {
  outline: 0.16rem solid rgba(255, 255, 255, 0.92);
  outline-offset: 0.18rem;
}

/* === AJUSTE: VISOR DE MANUAL DE IDENTIDAD MÁS ALTO === */

.portfolio-section--manuals {
  height: 100%;
  min-height: 0;
  padding: clamp(0.65rem, 1.4vw, 1.1rem);
}

.portfolio-section--manuals .manual-explorer {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(13rem, 0.26fr) minmax(0, 1fr);
}

.portfolio-section--manuals .manual-explorer__sidebar,
.portfolio-section--manuals .manual-explorer__viewer {
  height: 100%;
  min-height: 0;
}

.portfolio-section--manuals .manual-explorer__viewer {
  overflow: hidden;
}

.portfolio-section--manuals .portfolio-pdf {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Oculta la agenda de Sobre mí en desktop */
.panel--sobre-mi .asset--about-notebook {
  display: none;
}

.panel--portafolio .programs-title2 {
    display: none;
    opacity: 0;
  }

/* ================================
   RESPONSIVE FIXES
   ================================ */

@media (hover: none), (pointer: coarse) {
  .asset-hitbox {
    display: none !important;
    pointer-events: none !important;
  }

  .asset.is-asset-hovered,
  .panel--inicio.is-index-notebook-group-hovered .asset--index-notebook {
    scale: 1 !important;
  }

  .panel--inicio.is-index-notebook-group-hovered .nav-button--index,
  .nav-button:hover,
  .folder-link:hover,
  .phone-button:hover,
  .contact-icon-button:hover,
  .portfolio-close:hover,
  .portfolio-inner-close:hover,
  .campaign-pdf-viewer__arrow:hover:not(:disabled) {
    transform: none;
    box-shadow: none;
  }

  .campaign-frame:hover {
    --card-lift: 0rem;
  }

  .campaign-frame.is-back-left:hover,
  .campaign-frame.is-back-right:hover {
    --card-opacity: 0.7;
    --card-brightness: 0.68;
  }
}

@media (max-width: 1199px) {
  :root {
    --responsive-safe-padding: clamp(0.65rem, 2.8vw, 1.3rem);
    --responsive-button-font: clamp(0.76rem, 3.2vw, 1rem);
    --responsive-title-font: clamp(1rem, 4.8vw, 1.85rem);
    --responsive-touch-size: 2.75rem;
  }

  .horizontal-stage,
  .panel,
  .page {
    height: 100dvh;
    min-height: 100svh;
  }

  .scene {
    overflow: hidden;
  }

  .nav-button {
    width: var(--w);
    min-width: 0;
    min-height: var(--responsive-touch-size);
    padding: 0.55rem 0.9rem;
    font-size: var(--responsive-button-font);
    line-height: 1.05;
    white-space: normal;
  }

  .folder-link,
  .phone-button,
  .manual-file,
  .campaign-carousel__arrow,
  .campaign-pdf-viewer__arrow,
  .portfolio-close,
  .portfolio-inner-close {
    touch-action: manipulation;
  }

  .portfolio-expand {
    padding: var(--responsive-safe-padding);
  }

  .portfolio-expand__device {
    max-width: calc(100vw - (var(--responsive-safe-padding) * 2));
    max-height: calc(100dvh - (var(--responsive-safe-padding) * 2));
  }

  .portfolio-expand__bezel {
    padding: clamp(0.38rem, 1.3vw, 0.8rem);
  }

  .portfolio-viewbar {
    gap: 0.65rem;
    padding: clamp(0.48rem, 1.6vw, 0.8rem) clamp(0.58rem, 2vw, 1rem);
  }

  .portfolio-close,
  .portfolio-inner-close {
    width: clamp(2.15rem, 7.2vw, 2.8rem);
    height: clamp(2.15rem, 7.2vw, 2.8rem);
    font-size: clamp(1.55rem, 5.5vw, 2.1rem);
  }

  .portfolio-expanded-content {
    -webkit-overflow-scrolling: touch;
  }

  .portfolio-pdf,
  .portfolio-video-full {
    min-height: 0;
  }
}

@media (max-width: 767px) {
  :root {
    --mobile-edge-gap: clamp(0.72rem, 3.2vw, 1rem);
    --mobile-modal-pad: clamp(0.36rem, 1.64vw, 0.5rem);
    --mobile-bottom-y: calc(100dvh - clamp(3.9rem, 7.75dvh, 4.35rem));
    --mobile-index-y: clamp(13.25rem, 42.8dvh, calc(100dvh - 4.45rem));
    --mobile-short-relief: clamp(0rem, calc((844px - 100dvh) * 0.055), 2.25rem);
    --mobile-tall-relief: clamp(0rem, calc((100dvh - 844px) * 0.025), 1rem);
    --mobile-portfolio-folder-height: clamp(5.15rem, 12.9dvh, 7.55rem);
  }

  .asset {
    width: min(132svh, 360vw);
    height: 100svh;
  }

  .scene::after {
    background:
      radial-gradient(circle at center, transparent 0 64%, rgba(0, 0, 0, 0.24) 100%),
      linear-gradient(115deg, transparent 0 44%, rgba(255, 255, 255, 0.03) 50%, transparent 58%);
  }

  .nav-button {
    max-width: calc(100vw - (var(--mobile-edge-gap) * 2));
    min-height: clamp(2.55rem, 5.2dvh, 2.85rem);
    border-radius: 0.58rem;
  }

  .asset--keyboard {
    transform: translate(-25%, -2%) scale(0.86);
  }

  .asset--graphic-tablet {
    transform: translate(14%, -42%) scale(0.86);
  }

  .asset--index-drawings {
    transform: translate(-14%, -2%) scale(0.96);
  }

  .asset--color-wheel {
    transform: translate(-38%, 38%) scale(0.92);
  }

  .asset--index-notebook {
    transform: translate(18%, 7%) scale(0.98);
  }

  .nav-button--index {
    --x: max(1rem, calc(100vw - 8.2rem));
    --y: var(--mobile-index-y);
    --w: 7.2rem;
  }

  .panel--sobre-mi .asset--photo,
  .panel--sobre-mi .asset--note,
  .panel--sobre-mi .about-title,
  .panel--sobre-mi .nav-button--about-back,
  .panel--sobre-mi .nav-button--about-next {
    translate: 0 0;
  }

  .asset--camera {
    transform: translate(-48%, -15%) scale(0.84);
  }

  .asset--graphic-tablet-sobremi {
    transform: translate(-76%, -10%) scale(0.86);
  }

  .asset--cartel-sobremi {
    transform: translate(-18%, -32%) scale(1.45) rotate(-10deg);
  }

  .asset--photo-dog {
    transform: translate(-14%, 2%) scale(0.88);
  }

  .asset--photo-adoption {
    transform: translate(-4%, -2%) scale(0.86);
  }

  .asset--photo-cupcakes {
    transform: translate(-13%, 9%) scale(0.86);
  }

  .asset--photo-podcast {
    transform: translate(-1%, 7%) scale(0.86);
  }

  .asset--photo-dental {
    transform: translate(-14%, 16%) scale(0.84);
  }

  .asset--photo-dragon {
    transform: translate(-2%, 15%) scale(0.84);
  }

  .asset--photo-bouquet {
    transform: translate(-6%, 20%) scale(0.84);
  }

  .asset--note-edition,
  .asset--note-photo,
  .asset--note-recording,
  .asset--note-color,
  .asset--note-direction,
  .asset--note-vfx,
  .asset--note-illustration,
  .asset--note-planning {
    transform: translate(0, 4%) scale(0.86);
  }

  .about-title {
    left: 50%;
    top: 45%;
    font-size: clamp(1rem, 5.6vw, 1.35rem);
  }

  .nav-button--about-back {
    --x: 0.9rem;
    --y: calc(100dvh - 4.1rem);
    --w: 7rem;
  }

  .nav-button--about-next {
    --x: calc(100vw - 8rem);
    --y: calc(100dvh - 4.1rem);
    --w: 7.1rem;
  }

  .portfolio-paper-strip {
    width: 96%;
    height: 24%;
    bottom: -9%;
  }

  .asset--ipad {
    transform: translate(-24%, 6%) scale(0.96);
  }

  .asset--apple-pencil {
    transform: translate(20%, 8%) scale(0.78);
  }

  .asset--cartel-ceuni-portafolio {
    transform: translate(-58%, -32%) scale(1.35) rotate(-10deg);
  }

  .tablet-copy {
    left: 19%;
    top: 31%;
    width: 54%;
    font-size: clamp(0.7rem, 3.15vw, 0.88rem);
    line-height: 1.02;
  }

  .folder-grid {
    left: 12%;
    top: 48%;
    width: min(12rem, 34vw);
    grid-template-columns: 1fr;
    gap: clamp(0.35rem, 1.4dvh, 0.62rem);
  }

  .folder-link {
    min-height: clamp(2.6rem, 8dvh, 3.35rem);
    padding: 0.42rem 0.5rem;
    font-size: clamp(0.64rem, 2.9vw, 0.8rem);
    line-height: 0.98;
  }

  .programs-title {
    left: auto;
    right: 4%;
    top: 4.8%;
    font-size: clamp(0.8rem, 3.7vw, 1.05rem);
    opacity: 0.72;
  }

  .asset--program {
    transform: translate(25%, 2%) scale(0.74);
  }

  .nav-button--portfolio-back {
    --x: 0.85rem;
    --y: calc(100dvh - 4rem);
    --w: 7rem;
  }

  .nav-button--portfolio-next {
    --x: calc(100vw - 12rem);
    --y: calc(100dvh - 7.95rem);
    --w: 11.1rem;
  }

  .asset--iphone {
    transform: translate(-36%, 6%) scale(0.94);
  }

  .asset--portrait {
    transform: translate(4%, 7%) scale(0.78);
  }

  .asset--character {
    transform: translate(9%, 14%) scale(0.76);
  }

  .asset--pen {
    transform: translate(24%, 34%) scale(0.8);
  }

  .phone-ui {
    left: clamp(1.35rem, 7vw, 2.8rem);
    top: 28%;
    width: clamp(7.8rem, 35vw, 9.6rem);
  }

  .phone-ui h2 {
    margin-bottom: 0.72rem;
    font-size: clamp(0.8rem, 3.6vw, 1.05rem);
    letter-spacing: 0.22em;
  }

  .phone-button {
    min-height: 2.7rem;
    margin-bottom: 0.55rem;
    padding-inline: 0.45rem;
    font-size: clamp(0.68rem, 3vw, 0.86rem);
  }

  .contact-icons {
    margin-block: 0.75rem 0.55rem;
    font-size: clamp(1.05rem, 5vw, 1.4rem);
  }

  .phone-ui p {
    font-size: clamp(0.58rem, 2.5vw, 0.72rem);
  }

  .nav-button--contact-back {
    --x: calc(100vw - 12rem);
    --y: calc(100dvh - 4.1rem);
    --w: 11.1rem;
  }

  .portfolio-expand {
    padding: var(--mobile-modal-pad);
  }

  .portfolio-expand__device {
    width: calc(100vw - (var(--mobile-modal-pad) * 2));
    height: calc(100dvh - (var(--mobile-modal-pad) * 2));
    aspect-ratio: auto;
  }

  .portfolio-expand__bezel {
    padding: 0.32rem;
    border-radius: 0.95rem;
  }

  .portfolio-expand__screen {
    border-radius: 0.68rem;
  }

  .portfolio-viewbar__eyebrow {
    font-size: 0.52rem;
    letter-spacing: 0.12em;
  }

  .portfolio-viewbar h2 {
    font-size: clamp(1rem, 5.2vw, 1.28rem);
  }

  .portfolio-section,
  .portfolio-section--campaigns,
  .portfolio-section--manuals {
    padding: clamp(0.42rem, 2.05vw, 0.55rem);
  }

  .campaign-carousel {
    gap: 0.4rem;
  }

  .campaign-carousel__stage {
    min-height: 0;
    overflow: hidden;
    perspective: 44rem;
  }

  .campaign-carousel__stage::before {
    inset: 4% 2% 4%;
  }

  .campaign-frame.is-front-left {
    --card-left: 50%;
    --card-top: 57%;
    --card-width: min(70%, clamp(14.5rem, 66.5vw, 17rem));
    --card-scale: 0.92;
    --card-rotate: -0.45deg;
  }

  .campaign-frame.is-front-right {
    --card-left: 67%;
    --card-top: 35%;
    --card-width: min(54%, clamp(11.2rem, 53vw, 13.9rem));
    --card-scale: 0.78;
    --card-opacity: 0.62;
    --card-brightness: 0.78;
    z-index: 3;
  }

  .campaign-frame.is-back-left {
    --card-left: 30%;
    --card-top: 34%;
    --card-width: min(46%, clamp(9.2rem, 45vw, 12.2rem));
    --card-scale: 0.65;
  }

  .campaign-frame.is-back-right {
    --card-left: 73%;
    --card-top: 72%;
    --card-width: min(42%, clamp(8.4rem, 41vw, 11.2rem));
    --card-scale: 0.62;
  }

  .campaign-frame__art {
    padding: 0.38rem;
  }

  .campaign-frame__label,
  .video-card__label {
    font-size: clamp(0.66rem, 2.7vw, 0.8rem);
  }

  .campaign-carousel__controls {
    min-height: 2.9rem;
  }

  .campaign-carousel__arrow,
  .campaign-pdf-viewer__arrow {
    width: 2.75rem;
    height: 2.75rem;
  }

  .campaign-pdf-viewer {
    gap: 0.42rem;
    padding: 0.38rem;
  }

  .campaign-pdf-viewer__canvas-wrap {
    padding: 0.32rem;
  }

  .campaign-pdf-viewer__controls {
    min-height: 2.85rem;
    gap: 0.42rem;
  }

  .campaign-pdf-viewer__counter {
    min-width: 0;
    width: min(9.2rem, 44vw);
    font-size: 0.72rem;
  }

  .portfolio-section--manuals .manual-explorer {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.55rem;
  }

  .portfolio-section--manuals .manual-explorer__viewer {
    position: relative;
    overflow: hidden;
  }

  .portfolio-section--manuals .portfolio-pdf {
    position: absolute;
    top: 0;
    left: 50%;
    width: 148%;
    max-width: none;
    height: 148%;
    transform: translateX(-50%) scale(0.675);
    transform-origin: top center;
  }

  .portfolio-section--manuals .manual-explorer__sidebar {
    display: flex;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 0.28rem;
    background: transparent;
    border: 0;
  }

  .manual-file {
    min-width: clamp(9.5rem, 45vw, 11.75rem);
    min-height: clamp(2.5rem, 5.1dvh, 2.7rem);
    font-size: 0.76rem;
  }

  .portfolio-section--videos {
    padding: 0.5rem;
  }

  .video-masonry {
    columns: 1 100%;
    column-gap: 0.2rem;
  }

  .video-card {
    margin-bottom: 1.12rem;
    border-radius: 0.65rem;
  }

  .portfolio-inner-modal {
    gap: 0.46rem;
    padding: 0.5rem;
  }

  .portfolio-inner-header {
    gap: 0.55rem;
  }

  .portfolio-inner-header h3 {
    font-size: clamp(0.9rem, 4.4vw, 1.16rem);
  }
}

@media (max-width: 480px) {
  .portfolio-section--manuals .portfolio-pdf {
    width: 160%;
    height: 160%;
    transform: translateX(-50%) scale(0.625);
  }

  .tablet-copy {
    left: 18.5%;
    width: 49%;
  }

  .folder-grid {
    left: 11.5%;
    width: min(9.8rem, 30vw);
  }

  .folder-link {
    min-height: 2.45rem;
    padding-inline: 0.36rem;
  }

  .programs-title {
    right: 3%;
    max-width: 5.4rem;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .asset {
    width: 100vw;
    height: 100dvh;
  }

  .nav-button {
    min-height: 2.35rem;
    font-size: clamp(0.68rem, 1.8vw, 0.88rem);
  }

  .nav-button--index {
    --x: calc(100vw - 7.8rem);
    --y: calc(100dvh - 4rem);
    --w: 6.8rem;
  }

  .about-title {
    left: 52%;
    top: 43%;
    font-size: clamp(0.9rem, 2.6vw, 1.2rem);
  }

  .nav-button--about-back {
    --x: 2.2rem;
    --y: calc(100dvh - 3.45rem);
    --w: 6.3rem;
  }

  .nav-button--about-next {
    --x: calc(100vw - 8.7rem);
    --y: calc(100dvh - 3.45rem);
    --w: 6.5rem;
  }

  .asset--ipad {
    transform: translate(-17%, 0%) scale(0.98);
  }

  .tablet-copy {
    left: 15%;
    top: 29%;
    width: 42%;
    font-size: clamp(0.66rem, 1.7vw, 0.82rem);
  }

  .folder-grid {
    left: 10%;
    top: 51%;
    width: 52%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.55rem, 2vw, 1rem);
  }

  .folder-link {
    min-height: 3rem;
    font-size: clamp(0.62rem, 1.55vw, 0.78rem);
  }

  .programs-title {
    right: 5%;
    top: 4%;
    max-width: 8rem;
  }

  .nav-button--portfolio-back {
    --x: calc(100vw - 15.6rem);
    --y: calc(100dvh - 3.4rem);
    --w: 6.4rem;
  }

  .nav-button--portfolio-next {
    --x: calc(100vw - 8.7rem);
    --y: calc(100dvh - 3.4rem);
    --w: 7.9rem;
  }

  .phone-ui {
    left: 10%;
    top: 25%;
    width: 8.6rem;
  }

  .nav-button--contact-back {
    --x: calc(100vw - 12rem);
    --y: calc(100dvh - 3.5rem);
    --w: 11rem;
  }

  .portfolio-expand__device {
    width: min(calc(100vw - 0.8rem), calc((100dvh - 0.8rem) * 1.777));
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .portfolio-viewbar {
    padding: 0.38rem 0.58rem;
  }

  .campaign-frame.is-front-left {
    --card-left: 31%;
    --card-top: 55%;
    --card-width: min(38%, 16rem);
    --card-scale: 1;
    --card-rotate: -0.6deg;
  }

  .campaign-frame.is-front-right {
    --card-left: 69%;
    --card-top: 55%;
    --card-width: min(38%, 16rem);
    --card-scale: 1;
    --card-opacity: 1;
    --card-brightness: 1;
  }

  .video-masonry {
    columns: 2 9rem;
    column-gap: 0.95rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .asset {
    width: min(132svh, 190vw);
    height: 100svh;
  }

  .panel--sobre-mi .asset--photo,
  .panel--sobre-mi .asset--note,
  .panel--sobre-mi .about-title,
  .panel--sobre-mi .nav-button--about-back,
  .panel--sobre-mi .nav-button--about-next {
    translate: 0 0;
  }

  .about-title {
    left: 52%;
    top: 46%;
    font-size: clamp(1.35rem, 3.1vw, 1.85rem);
  }

  .nav-button--about-back {
    --x: 5%;
    --y: calc(100dvh - 5.1rem);
    --w: 8.4rem;
  }

  .nav-button--about-next {
    --x: calc(100vw - 11rem);
    --y: calc(100dvh - 5.1rem);
    --w: 8.7rem;
  }

  .asset--ipad {
    transform: translate(-24%, 5%) scale(0.98);
  }

  .tablet-copy {
    left: 18%;
    top: 31%;
    width: 50%;
    font-size: clamp(0.95rem, 2.25vw, 1.25rem);
  }

  .folder-grid {
    left: 10%;
    top: 50%;
    width: 60%;
    gap: clamp(0.9rem, 3.2vw, 2.1rem);
  }

  .folder-link {
    min-height: clamp(4.2rem, 10dvh, 6.2rem);
    font-size: clamp(0.86rem, 2vw, 1.1rem);
  }

  .programs-title {
    left: auto;
    right: 4%;
    top: 4%;
    font-size: clamp(1.05rem, 2.5vw, 1.55rem);
  }

  .asset--program {
    transform: translate(28%, -1%) scale(0.86);
  }

  .nav-button--portfolio-back {
    --x: calc(100vw - 18rem);
    --y: calc(100dvh - 5rem);
    --w: 7.6rem;
  }

  .nav-button--portfolio-next {
    --x: calc(100vw - 10.2rem);
    --y: calc(100dvh - 5rem);
    --w: 9.2rem;
  }

  .phone-ui {
    left: clamp(8.5rem, 19vw, 11.2rem);
    top: 30%;
    width: clamp(10rem, 18vw, 12rem);
  }

  .nav-button--contact-back {
    --x: calc(100vw - 14.2rem);
    --y: calc(100dvh - 5rem);
    --w: 13rem;
  }

  .portfolio-section--manuals .manual-explorer {
    grid-template-columns: minmax(10rem, 0.26fr) minmax(0, 1fr);
  }

  .video-masonry {
    columns: 2 12rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .portfolio-expand__device {
    width: calc(100vw - 1.6rem);
    height: calc(100dvh - 1.6rem);
    aspect-ratio: auto;
  }

  .portfolio-expand__bezel {
    border-radius: 1.4rem;
  }

  .portfolio-section--campaigns,
  .portfolio-section--manuals,
  .portfolio-section--videos {
    padding: 0.75rem;
  }

  .campaign-carousel__stage {
    min-height: 0;
    overflow: hidden;
  }

  .campaign-frame.is-front-left {
    --card-left: 39%;
    --card-top: 53%;
    --card-width: min(45%, 21rem);
  }

  .campaign-frame.is-front-right {
    --card-left: 67%;
    --card-top: 52%;
    --card-width: min(45%, 21rem);
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .folder-grid {
    left: 9%;
    width: 62%;
    gap: clamp(1.4rem, 4.2vw, 3.4rem);
  }

  .tablet-copy {
    left: 18%;
    width: 46%;
  }

  .programs-title {
    left: 76%;
  }

  .nav-button--portfolio-back {
    --x: 76%;
    --w: 10.5rem;
  }

  .nav-button--portfolio-next {
    --x: 74%;
    --w: 15rem;
  }

  .portfolio-section--manuals .manual-explorer {
    grid-template-columns: minmax(10.5rem, 0.24fr) minmax(0, 1fr);
  }
}

/* =========================================================
   MOBILE MANUAL CONTROL PANEL
   Usa este bloque SOLO para acomodar mobile.
   Cambia display / opacity / transform / --x / --y / --w.
   ========================================================= */

@media (max-width: 767px) {
  /* -----------------------------------------
     0. Desactivar hitboxes y grow en mobile
  ----------------------------------------- */

  .asset-hitbox {
    display: none !important;
    pointer-events: none !important;
  }

  .asset,
  .asset.is-asset-hovered {
    scale: 1 !important;
  }

  .nav-button:hover,
  .folder-link:hover,
  .phone-button:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* =========================================================
     1. INICIO
     Página: #inicio
  ========================================================= */

  /* Teclado */
  .panel--inicio .asset--keyboard {
    display: block !important; /* block = aparece | none = desaparece */
    opacity: 1 !important;
    transform: translate(-25%, -26%) scale(0.86) rotate(0deg) !important;
  }

  /* Tableta gráfica */
  .panel--inicio .asset--graphic-tablet {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-53%, 2%) scale(0.86) rotate(0deg) !important;
  }

  /* Dibujos */
  .panel--inicio .asset--index-drawings {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-25%, 15%) scale(1) rotate(0deg) !important;
  }

  /* Círculo / paleta de color */
  .panel--inicio .asset--color-wheel {
    display: none !important;
    opacity: 0 !important;
    transform: translate(5%, 8%) scale(1) rotate(10deg) !important;
  }

  /* Libreta / agenda */
  .panel--inicio .asset--index-notebook {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-10%, -44%) scale(1) rotate(1deg) !important;
  }

  /* Botón Sobre mí */
  .panel--inicio .nav-button--index {
    display: inline-flex !important;
    opacity: 1 !important;
    --x: max(1rem, calc(100vw - 10rem));
    --y: var(--mobile-index-y);
    --w: 7.2rem;
  }

  /* =========================================================
     2. SOBRE MÍ
     Página: #sobre-mi
  ========================================================= */

  /* Cámara */
  .panel--sobre-mi .asset--camera {
    display: none !important;
    opacity: 0 !important;
    transform: translate(-48%, -15%) scale(0.84) rotate(0deg) !important;
  }

  /* Tableta gráfica sobre mí */
  .panel--sobre-mi .asset--graphic-tablet-sobremi {
    display: none !important;
    opacity: 0 !important;
    transform: translate(-76%, -10%) scale(0.86) rotate(0deg) !important;
  }

  .panel--sobre-mi .asset--about-notebook {
    z-index: 98;
    display: block !important;
    opacity: 1 !important;
    transform: translate(-53%, -43%) scale(1) rotate(0deg) !important;
  }

  /* Cartel fondo */
  .panel--sobre-mi .asset--cartel-sobremi {
    display: none !important;
    opacity: 0 !important;
    transform: translate(-18%, -32%) scale(1.45) rotate(-10deg) !important;
  }

  /* Foto perro */
  .panel--sobre-mi .asset--photo-dog {
    z-index: 95;
    display: block !important;
    opacity: 1 !important;
    transform: translate(-20%, 20%) scale(0.88) rotate(0deg) !important;
  }

  /* Foto adopción */
  .panel--sobre-mi .asset--photo-adoption {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-10%, -15%) scale(0.86) rotate(0deg) !important;
  }

  /* Foto cupcakes */
  .panel--sobre-mi .asset--photo-cupcakes {
    z-index: 90;
    display: block !important;
    opacity: 1 !important;
    transform: translate(0%, -36%) scale(0.86) rotate(0deg) !important;
  }

  /* Foto podcast */
  .panel--sobre-mi .asset--photo-podcast {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-27%, -18%) scale(1.02) rotate(0deg) !important;
  }

  /* Foto dental */
  .panel--sobre-mi .asset--photo-dental {
    display: none !important;
    opacity: 0 !important;
    transform: translate(-14%, 16%) scale(0.84) rotate(0deg) !important;
  }

  /* Foto dragón / modelado */
  .panel--sobre-mi .asset--photo-dragon {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-19%, -24.5%) scale(0.84) rotate(10deg) !important;
  }

  /* Foto bouquet */
  .panel--sobre-mi .asset--photo-bouquet {
    z-index: 90;
    display: block !important;
    opacity: 1 !important;
    transform: translate(-15%, -39%) scale(0.84) rotate(0deg) !important;
  }

  /* Notas / post-its */
  .panel--sobre-mi .asset--note-edition {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-34%, 18%) scale(1) rotate(0deg) !important;
  }

  .panel--sobre-mi .asset--note-photo {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-33%, 21%) scale(1.05) rotate(0deg) !important;
  }

  .panel--sobre-mi .asset--note-recording {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-31%, 20%) scale(1.05) rotate(0deg) !important;
  }

  .panel--sobre-mi .asset--note-color {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-27%, 14%) scale(1.05) rotate(0deg) !important;
  }

  .panel--sobre-mi .asset--note-direction {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-26.5%, 18%) scale(1.05) rotate(0deg) !important;
  }

  .panel--sobre-mi .asset--note-vfx {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-26%, 10%) scale(1.05) rotate(0deg) !important;
  }

  .panel--sobre-mi .asset--note-illustration {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-44%, 4.5%) scale(1.05) rotate(0deg) !important;
  }

  .panel--sobre-mi .asset--note-planning {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-33%, 9%) scale(1.05) rotate(0deg) !important;
  }

  /* Título Mis habilidades técnicas */
  .panel--sobre-mi .about-title {
    display: block !important;
    opacity: 1 !important;
    left: 50% !important;
    top: 85% !important;
    transform: translate(-50%, -50%) !important;
    font-size: clamp(1rem, 5.6vw, 1.35rem) !important;
  }

  /* Assets y título hacia abajo */

  .panel--sobre-mi {
    --sobre-mi-notes-group-y: clamp(2rem, 5dvh, 2.8rem);
  }

  .panel--sobre-mi .asset--note-edition,
  .panel--sobre-mi .asset--note-photo,
  .panel--sobre-mi .asset--note-recording,
  .panel--sobre-mi .asset--note-color,
  .panel--sobre-mi .asset--note-direction,
  .panel--sobre-mi .asset--note-vfx,
  .panel--sobre-mi .asset--note-illustration,
  .panel--sobre-mi .asset--note-planning,
  .panel--sobre-mi .about-title {
    translate: 0 var(--sobre-mi-notes-group-y) !important;
  }

  /* Botón Regresar */
  .panel--sobre-mi .nav-button--about-back {
    display: inline-flex !important;
    opacity: 1 !important;
    --x: 0.9rem;
    --y: var(--mobile-bottom-y);
    --w: 7rem;
  }

  /* Botón Ver más */
  .panel--sobre-mi .nav-button--about-next {
    display: inline-flex !important;
    opacity: 1 !important;
    --x: calc(100vw - 8rem);
    --y: var(--mobile-bottom-y);
    --w: 7.1rem;
  }

  /* =========================================================
     3. PORTAFOLIO
     Página: #portafolio
  ========================================================= */

  /* iPad */
  .panel--portafolio .asset--ipad {
    display: block !important;
    opacity: 1 !important;
    transform: translate(47%, 10%) scale(0.66) rotate(90deg) !important;
  }

  /* Apple Pencil */
  .panel--portafolio .asset--apple-pencil {
    transform-origin: center center;
    z-index: 10;
    display: block !important;
    opacity: 1 !important;
    transform: translate(-45%, 10%) scale(0.86) rotate(180deg) !important;
  }

  /* Cartel fondo */
  .panel--portafolio .asset--cartel-ceuni-portafolio {
    z-index: 1;
    display: none !important;
    opacity: 0 !important;
    transform: translate(-58%, -32%) scale(1.35) rotate(-10deg) !important;
  }

  /* Texto dentro del iPad */
  .panel--portafolio .tablet-copy {
    display: block !important;
    opacity: 1 !important;
    left: 25% !important;
    top: 30.5% !important;
    width: 54% !important;
    font-weight: 500;
    font-size: clamp(0.7rem, 3.15vw, 0.88rem) !important;
  }

  /* Carpetas / botones internos del iPad */
  .panel--portafolio .folder-grid {
    display: grid !important;
    opacity: 1 !important;
    left: 34.5% !important;
    top: calc(38% - var(--mobile-short-relief) + var(--mobile-tall-relief)) !important;
    width: clamp(7rem, 34vw, 12rem) !important;
    grid-template-columns: 1fr !important;
    gap: clamp(0.05rem, 0.8dvh, 0.22rem) !important;
  }

  .panel--portafolio .folder-link {
    display: inline-flex !important;
    opacity: 1 !important;
    min-height: var(--mobile-portfolio-folder-height) !important;
    font-size: clamp(0.64rem, 2.9vw, 0.8rem) !important;
  }

  /* Título Programas */
  .panel--portafolio .programs-title2 {
    display: block !important;
    opacity: 1 !important;
    font-weight: 700;
    font-size: clamp(0.8rem, 3.7vw, 1.05rem) !important;
    color:#ffffff !important;
    z-index: 999;
    transform-origin: center center;
    transform: translate(28%, 20%) !important;
  }

  .panel--portafolio .programs-title {
    display: none;
    opacity: 0;
  }  

  /* Stickers programas */
  .panel--portafolio .assets--program-ps,
  .panel--portafolio .asset--program-ae,
  .panel--portafolio .asset--program-ai,
  .panel--portafolio .asset--program-lr,
  .panel--portafolio .asset--program-id,
  .panel--portafolio .asset--program-pr,
  .panel--portafolio .asset--program-capcut,
  .panel--portafolio .asset--program-davinci {
    transform-origin: center center !important;
    z-index: 99;
    display: block !important;
    opacity: 1 !important;
  }

    .panel--portafolio .asset--program-ps {
    transform: translate(-51%, 18%) scale(1) rotate(-25deg) !important;
  }

  .panel--portafolio .asset--program-ae {
    transform: translate(-35%, -34%) scale(1) rotate(-25deg) !important;
  }

  .panel--portafolio .asset--program-ai {
    transform: translate(-34%, -35%) scale(1) rotate(-25deg) !important;
  }

  .panel--portafolio .asset--program-lr {
    transform: translate(-28%, -31%) scale(1) rotate(-5deg) !important;
  }

  .panel--portafolio .asset--program-id {
    transform: translate(-28%, -33%) scale(1) rotate(-25deg) !important;
  }

  .panel--portafolio .asset--program-pr {
    transform: translate(-23%, -53%) scale(1) rotate(-25deg) !important;
  }

  .panel--portafolio .asset--program-capcut {
    transform: translate(-23%, -53%) scale(1) rotate(-25deg) !important;
  }

  .panel--portafolio .asset--program-davinci {
    transform: translate(-17%, -52%) scale(1) rotate(-25deg) !important;
  }

  /* Botón Regresar */
  .panel--portafolio .nav-button--portfolio-back {
    display: inline-flex !important;
    opacity: 1 !important;
    --x: 0.85rem;
    --y: var(--mobile-bottom-y);
    --w: 7rem;
  }

  /* Botón Trabajemos juntos */
  .panel--portafolio .nav-button--portfolio-next {
    display: inline-flex !important;
    opacity: 1 !important;
    --x: calc(100vw - 11rem);
    --y: var(--mobile-bottom-y);
    --w: 10rem;
  }

  /* =========================================================
     4. CONTACTO
     Página: #contacto
  ========================================================= */

  /* iPhone */
  .panel--contacto .asset--iphone {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-34%, -10%) scale(0.94) rotate(0deg) !important;
  }

  /* Retrato */
  .panel--contacto .asset--portrait {
    display: block !important;
    opacity: 1 !important;
    z-index: 1;
    transform: translate(-10%, 7%) scale(0.78) rotate(0deg) !important;
  }

  /* Personaje 3D */
  .panel--contacto .asset--character {
    display: block !important;
    opacity: 1 !important;
    z-index: 99;
    transform: translate(-25%, 42%) scale(0.76) rotate(0deg) !important;
  }

  /* Pluma */
  .panel--contacto .asset--pen {
    display: block !important;
    opacity: 1 !important;
    transform: translate(-4%, 18%) scale(0.8) rotate(0deg) !important;
  }

  /* UI dentro del teléfono */
  .panel--contacto .phone-ui {
    display: block !important;
    opacity: 1 !important;
    left: 12.5% !important;
    top: 21% !important;
    width: clamp(7.8rem, 34.9vw, 10rem) !important;
  }

  /* Botones del teléfono */
  .panel--contacto .phone-button {
    display: inline-flex !important;
    opacity: 1 !important;
  }

  /* Botón Volver al portafolio */
  .panel--contacto .nav-button--contact-back {
    display: inline-flex !important;
    opacity: 1 !important;
    --x: calc(100vw - 12rem);
    --y: var(--mobile-bottom-y);
    --w: 11.1rem;
  }
}

@media (max-width: 389px) {
  .panel--inicio .nav-button--index {
    z-index: 140;
    left: calc(100vw - clamp(8.95rem, 39vw, 9.35rem)) !important;
    top: var(--mobile-index-y) !important;
    width: clamp(6.75rem, 30vw, 7.2rem) !important;
    --x: calc(100vw - clamp(8.95rem, 39vw, 9.35rem));
    --w: clamp(6.75rem, 30vw, 7.2rem);
  }
}

@media (max-width: 360px) {
  .panel--portafolio .folder-grid {
    left: 33.5% !important;
    width: clamp(6.8rem, 35vw, 8.2rem) !important;
  }

  .panel--portafolio .folder-link {
    min-height: clamp(4.85rem, 12.7dvh, 6.65rem) !important;
    padding-inline: 0.36rem !important;
  }
}