:root { --accent: #00eaff; --accent-ink: #07171b; }
body[data-palette="blue"],
body[data-palette="orange"] { --accent: #00eaff; --accent-ink: #07171b; }

.studio-brand { display: block; position: absolute; left: 50%; transform: translateX(-50%); width: clamp(218px,27vw,390px); height: 56px; z-index: 2; }
.studio-logo { display: block; width: 100%; height: 100%; background: var(--accent); -webkit-mask: url("logos/Kurakku Studio Logo Gris (secundario invertido).png") center/contain no-repeat; mask: url("logos/Kurakku Studio Logo Gris (secundario invertido).png") center/contain no-repeat; }
.header-label { color: var(--accent); font-size: .66rem; letter-spacing: .14em; }
.hero h1 { color: #f5f2e9; font-size: clamp(5.2rem,17.5vw,18rem); }
.hero-role { color: #4b5e61; }
.project-blue { background: #75eefe; }
.project-pink { background: #27d8ed; }
.ticker { background: #00eaff; }

.floating-card.icon-card,
.floating-card.mockup-card { background: transparent; box-shadow: none; }
.floating-card.icon-card {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 22%;
  box-shadow: 0 20px 34px rgba(0,0,0,.48);
}
.floating-card.icon-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: inherit;
}
.floating-card.mockup-card img { object-fit: contain; filter: drop-shadow(0 24px 28px rgba(0,0,0,.45)); }
.hero-stack { left: 50%; right: auto; width: min(760px,82vw); transform: translateX(-50%); }
.card-a { aspect-ratio: 1; width: clamp(110px,16vw,264px); left: 19%; top: 28%; animation: float-left 5.4s ease-in-out infinite; }
.card-b { width: clamp(104px,13.6vw,224px); left: 42%; top: 12%; animation: float-center 4.8s ease-in-out infinite .25s; }
.card-c { width: clamp(110px,16vw,264px); left: 61%; right: auto; top: 31%; animation: float-right 5.8s ease-in-out infinite .5s; }
.floating-card { --mx: 0px; --my: 0px; will-change: transform; }
.floating-card:hover { animation-play-state: paused; z-index: 8!important; }
.floating-card:active { filter: brightness(1.16); }
.card-a:hover { transform: translate3d(var(--mx),calc(var(--my) - 10px),0) rotate(-3deg) scale(1.09); }
.card-b:hover { transform: translate3d(var(--mx),calc(var(--my) - 10px),0) rotate(1deg) scale(1.09); }
.card-c:hover { transform: translate3d(var(--mx),calc(var(--my) - 10px),0) rotate(3deg) scale(1.09); }
@keyframes float-left { 0%,100% { transform: translate3d(var(--mx),calc(var(--my) - 5px),0) rotate(-8deg); } 50% { transform: translate3d(var(--mx),calc(var(--my) + 8px),0) rotate(-5deg); } }
@keyframes float-center { 0%,100% { transform: translate3d(var(--mx),calc(var(--my) + 4px),0) rotate(4deg); } 50% { transform: translate3d(var(--mx),calc(var(--my) - 9px),0) rotate(1deg); } }
@keyframes float-right { 0%,100% { transform: translate3d(var(--mx),calc(var(--my) - 7px),0) rotate(8deg); } 50% { transform: translate3d(var(--mx),calc(var(--my) + 7px),0) rotate(5deg); } }

.project-mockups { background: #101010; }
.project-mockups img { position: absolute; max-width: none; opacity: 0; filter: drop-shadow(0 24px 30px rgba(0,0,0,.35)); transition: transform .75s cubic-bezier(.2,.8,.2,1),opacity .6s ease; }
.project.is-visible .project-mockups img { opacity: 1; }
.project.is-visible .project-mockups img:nth-child(1) { transition-delay: .06s; }
.project.is-visible .project-mockups img:nth-child(2) { transition-delay: .16s; }
.project.is-visible .project-mockups img:nth-child(3) { transition-delay: .26s; }
.alicante-mockups { background: #0f8be5; }
.alicante-mockups img:nth-child(1) { height: 77%; left: 1%; top: 13%; transform: rotate(-7deg); }
.alicante-mockups img:nth-child(2) { height: 78%; left: 34%; top: 5%; transform: rotate(2deg); }
.alicante-mockups img:nth-child(3) { height: 84%; right: -6%; top: 12%; transform: rotate(8deg); }
.alicante-mockups:hover img:nth-child(1) { transform: rotate(-4deg) translateY(-2%); }
.alicante-mockups:hover img:nth-child(3) { transform: rotate(4deg) translateY(-2%); }
.beat-mockups { background: #081714; }
.beat-mockups img:nth-child(1) { height: 79%; left: 2%; top: 10%; transform: rotate(-7deg); }
.beat-mockups img:nth-child(2) { height: 92%; left: 31%; top: 6%; transform: rotate(3deg); z-index: 2; }
.beat-mockups img:nth-child(3) { height: 78%; right: -2%; top: 13%; transform: rotate(8deg); }
.beat-mockups:hover img:nth-child(2) { transform: rotate(0) translateY(-2%); }
.ps2-mockups { background: #061b3a; }
.ps2-mockups img:nth-child(1) { height: 77%; left: 1%; top: 13%; transform: rotate(-7deg); }
.ps2-mockups img:nth-child(2) { height: 88%; left: 34%; top: 5%; transform: rotate(2deg); z-index: 2; }
.ps2-mockups img:nth-child(3) { height: 78%; right: -2%; top: 13%; transform: rotate(8deg); }
.ps2-mockups:hover img:nth-child(2) { transform: rotate(0) translateY(-2%); }

.app-rail { display: flex; gap: clamp(16px,3vw,44px); overflow-x: auto; padding: 14px 4px 30px; scrollbar-width: thin; scrollbar-color: var(--accent) #222; }
.app-chip { flex: 0 0 auto; width: clamp(96px,10vw,145px); border: 0; background: transparent; color: var(--ink); padding: 0; cursor: pointer; text-align: center; }
.app-chip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22%; display: block; border: 2px solid transparent; transition: transform .3s,border-color .3s,filter .3s; }
.app-chip span { display: block; margin-top: 12px; font-size: .69rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; white-space: nowrap; }
.app-chip:hover img { transform: translateY(-7px) rotate(-2deg); }
.app-chip.is-selected img { border-color: var(--accent); filter: drop-shadow(0 0 15px color-mix(in srgb,var(--accent) 55%,transparent)); }
.app-stage { margin-top: 45px; border-top: 1px solid var(--line); padding-top: 45px; display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(35px,7vw,100px); min-height: 680px; transition: opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1); }
.app-info { display: flex; flex-direction: column; align-items: flex-start; }
.app-info > img { width: 90px; height: 90px; object-fit: cover; border-radius: 22%; margin: 35px 0; }
.app-info > p:first-of-type,
.app-count { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 700; }
.app-info h3 { font-size: clamp(3rem,6vw,7rem); line-height: .82; letter-spacing: -.065em; margin: 22px 0 30px; }
.app-info > p:last-of-type { font-size: clamp(1rem,1.3vw,1.25rem); line-height: 1.5; color: #bbb; max-width: 480px; }
.app-info ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: auto 0 0; padding: 30px 0 0; }
.app-info li { border: 1px solid var(--line); border-radius: 99px; padding: 8px 12px; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.app-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px,1fr); gap: 16px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; padding: 0 0 12px; scrollbar-width: thin; scrollbar-color: var(--accent) #222; }
.app-gallery figure { margin: 0; background: linear-gradient(145deg,#12191b,#071012); height: min(68vw,680px); min-height: 520px; overflow: hidden; display: grid; place-items: center; scroll-snap-align: start; border: 1px solid rgba(0,234,255,.12); }
.app-gallery img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.app-gallery .icon-shot img { width: 68%; height: auto; aspect-ratio: 1; border-radius: 22%; box-shadow: 0 30px 50px rgba(0,0,0,.4); }
.modal-image { background: #081214; }
.modal-image img { object-fit: contain; object-position: center; }

@media (max-width: 800px) {
  .studio-brand { width: 240px; height: 46px; }
  .header-label { display: none; }
  .app-stage { grid-template-columns: 1fr; }
  .app-info ul { margin-top: 20px; }
  .app-gallery { grid-auto-columns: minmax(210px,72vw); }
  .app-gallery figure { height: min(126vw,680px); min-height: 480px; }
}
@media (max-width: 520px) {
  .studio-brand { width: 207px; height: 40px; }
  .hero-stack { top: 18%; }
  .card-a { left: 10%; }
  .card-b { left: 37%; }
  .card-c { left: 63%; }
  .project-mockups { min-height: 470px; }
  .alicante-mockups img:nth-child(1) { left: -7%; }
  .alicante-mockups img:nth-child(2) { left: 28%; }
  .beat-mockups img:nth-child(2) { left: 22%; }
  .ps2-mockups img:nth-child(1) { left: -7%; }
  .ps2-mockups img:nth-child(2) { left: 27%; }
  .app-gallery { grid-auto-columns: 78vw; }
  .app-gallery figure { height: 132vw; min-height: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-card { animation: none; }
  .project-mockups img { opacity: 1; transition: none; }
  .app-stage { transition: none; }
}

/* Cada captura conserva su proporción real: sin recortes ni bandas vacías. */
.app-gallery { align-items: start; }
.app-gallery figure { height: auto; min-height: 0; align-self: start; background: transparent; }
.app-gallery img { display: block; width: 100%; height: auto; object-fit: contain; }