/* Una segunda pasada sobre el diseño del ZIP: aqua, fotos y movimiento. */
@font-face {
  font-family:ECVSymbols;
  src:url('fonts/symbols.ttf') format('truetype');
  font-display:swap;
  unicode-range:U+2190-21FF,U+2300-23FF,U+2600-26FF,U+2733,U+00D7,U+2212
}
* {
  scrollbar-width:none
}
*::-webkit-scrollbar {
  display:none
}
body {
  font-family:ECVSymbols,Arial,sans-serif
}
button {
  font-family:ECVSymbols,Arial,sans-serif
}
body:not([data-view="cover"])>.cover-peek {
  display:none
}
.portada h1 {
  font-family:Arial,sans-serif;
  font-size:clamp(62px,8.1vw,120px);
  max-width:790px;
  line-height:1.03;
  letter-spacing:-.065em;
  position:relative;
  z-index:2
}
.portada h1>span {
  color:#288e98
}
.portada h2 {
  font-size:18px;
  max-width:420px;
  line-height:1.8
}
.portada-etiqueta {
  font-size:10px;
  letter-spacing:1.4px;
  margin-bottom:26px
}
.portada-entrar {
  position:relative;
  box-shadow:0 8px 25px #2b879b26;
  transition:transform .3s,box-shadow .3s
}
.portada-entrar:hover {
  transform:translateY(-4px);
  box-shadow:0 15px 45px #258fa647
}
.esfera-1 {
  animation:liquid-form 12s ease-in-out infinite alternate
}
.esfera-2 {
  animation:liquid-form 15s -8s ease-in-out infinite alternate-reverse
}
.cover-peek {
  position:fixed;
  right:5%;
  top:28%;
  width:28%;
  height:56%;
  z-index:1;
  pointer-events:none;
  perspective:1100px
}
.cover-peek img {
  position:absolute;
  object-fit:contain;
  border-radius:14px;
  padding:7px;
  background:#ffffff4a;
  box-shadow:0 30px 60px #427a9830;
  border:1px solid #ffffff75;
  max-height:350px;
  width:auto;
  height:80%;
  animation:photo-bob 6s ease-in-out infinite
}
.cover-peek img:first-child {
  height:62%;
  right:-5%;
  top:0;
  rotate:11deg;
  animation-delay:-3s
}
.cover-peek img:nth-child(2) {
  left:2%;
  top:10%;
  rotate:-9deg
}
.cover-peek>span {
  position:absolute;
  bottom:0;
  right:0;
  max-width:250px;
  color:#35637c;
  font-size:12px;
  line-height:1.6;
  rotate:6deg
}
.cover-peek span::first-letter {
  color:#1b788d
}
.experience-tools {
  position:fixed;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  z-index:45;
  padding:6px 12px;
  border:1px solid #9fe5df26;
  border-radius:35px;
  background:#082b38aa;
  backdrop-filter:blur(18px)
}
[data-view="cover"] .experience-tools {
  background:#ffffff55;
  border-color:#ffffff90;
  color:#174b60
}
.sound-button {
  border:0;
  background:none;
  color:inherit;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  white-space:nowrap;
  padding:5px
}
.sound-button>span:first-child {
  font-size:18px;
  color:var(--aqua)
}
[data-view="cover"] .sound-button>span:first-child {
  color:#157d88
}
.sound-level {
  width:63px;
  accent-color:var(--aqua);
  height:3px;
  cursor:pointer
}
.experience-tools label {
  display:flex;
  align-items:center;
  gap:7px;
  font:8px monospace;
  color:#9cbfc4
}
[data-view="cover"] .experience-tools label {
  color:#356476
}
.tools-divider {
  height:16px;
  width:1px;
  background:#8ab6bd40
}
.motion-button,.fullscreen-button {
  border:0;
  background:none;
  color:inherit;
  width:27px;
  height:27px;
  font-size:18px;
  display:grid;
  place-items:center
}
.motion-button[aria-pressed=true] {
  color:var(--aqua)
}
.sound-meter {
  display:flex;
  align-items:center;
  gap:2px;
  height:16px;
  width:15px
}
.sound-meter i {
  width:2px;
  height:4px;
  background:var(--aqua);
  border-radius:2px
}
.sound-on .sound-meter i {
  animation:meter .8s ease-in-out infinite alternate
}
.sound-meter i:nth-child(2) {
  animation-delay:-.4s
}
.sound-meter i:nth-child(3) {
  animation-delay:-.7s
}
.universe-art {
  top:15%;
  height:59%;
  left:7%;
  width:48%;
  max-height:510px
}
.hero-memory {
  object-fit:contain!important;
  mask-image:none!important;
  border-radius:18px!important;
  max-height:360px;
  height:80%;
  width:56%;
  left:21%;
  top:6%;
  background:#c5f8eb07;
  border:1px solid #a5e4df5c;
  padding:7px;
  box-shadow:0 20px 60px #0003;
  transform:translate3d(var(--mx),var(--my),0) rotate(-6deg);
  filter:none
}
.echo {
  object-fit:contain!important;
  border:1px solid #c6cdfb40;
  border-radius:14px!important;
  background:#bacaf20c;
  padding:5px;
  opacity:.78;
  filter:none;
  max-height:190px
}
.echo-one {
  width:26%;
  height:40%;
  left:-3%;
  top:20%;
  rotate:-4deg
}
.echo-two {
  width:25%;
  height:36%;
  right:-3%;
  bottom:16%;
  rotate:4deg
}
.art-caption {
  z-index:0;
  color:#b6f3e52c;
  font:italic 18px/1.5 Georgia,serif;
  letter-spacing:0;
  left:20%;
  bottom:-2%;
  rotate:-5deg
}
.liquid-seam {
  inset:-5% 1% 0;
  left:0;
  top:0;
  width:100%;
  height:100%;
  border-color:#91e8dc35;
  border-radius:40% 60% 61% 39%/41% 48% 52% 59%;
  background:radial-gradient(ellipse at 30% 30%,#8eeae816,transparent 60%);
  animation:liquid-form 12s ease-in-out infinite alternate
}
.universe-copy {
  left:61%;
  right:5%;
  top:22%
}
.universe-title {
  font-family:Arial,sans-serif;
  font-size:clamp(36px,4vw,63px);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.045em
}
.universe-intro {
  font-size:15px;
  line-height:1.9
}
.universe .eyebrow {
  font-family:Arial,sans-serif;
  letter-spacing:1.5px;
  font-size:9px
}
.frequency-item {
  border-radius:13px;
  transition:background .35s,transform .35s,box-shadow .35s
}
.frequency-item:hover {
  transform:translateY(-5px);
  background:#a6e6e413;
  box-shadow:0 7px 30px #75e4d20d
}
.frequency-item[aria-pressed=true] {
  background:linear-gradient(135deg,#7bf6dc20,#b4b6fa15);
  border-color:#9ae7df60;
  box-shadow:inset 0 0 20px #b9d5e910
}
.frequency-options {
  padding-top:9px
}
.frequency-heading {
  font-family:Arial,sans-serif;
  letter-spacing:1.3px;
  font-size:9px
}
.primary {
  transition:transform .3s,box-shadow .3s;
  box-shadow:0 5px 30px #7bf6dc0c
}
.primary:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 35px #7bf6dc35
}
.round {
  transition:transform .25s,background .25s
}
.round:hover {
  transform:scale(1.12);
  background:#a3dbe52b
}
.photo-button {
  overflow:visible;
  border-radius:14px
}
.photo-button::after {
  content:'↗';
  font-family:ECVSymbols,Arial,sans-serif;
  position:absolute;
  right:10px;
  bottom:10px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  color:var(--aqua);
  background:#092c3bd6;
  border:1px solid #a3e5de35;
  border-radius:50%;
  font-size:15px;
  pointer-events:none;
  transition:transform .3s
}
.photo-button:hover::after {
  transform:rotate(45deg)
}
main .photo-button img {
  object-fit:contain!important;
  max-height:330px!important;
  height:330px!important;
  width:100%!important;
  border-radius:12px;
  filter:none!important;
  mask-image:none!important
}
.presentacion-imagen .photo-button img {
  height:310px!important
}
.raw-foto {
  max-height:350px
}
.raw-foto .photo-button {
  height:330px
}
.raw-foto .photo-button img {
  height:310px!important
}
.galeria {
  max-height:365px;
  min-height:320px
}
.galeria-viajes figcaption {
  font-size:19px;
  line-height:1.8
}
.gustos figure {
  max-height:350px
}
.thumbnail img {
  object-fit:contain!important
}
.proyecto>.photo-button {
  max-height:330px
}
.connection img {
  object-fit:contain!important;
  max-height:45px
}
.connection {
  transition:transform .3s,background .3s
}
.connection:hover {
  transform:translateY(-4px);
  background:#9cdbdf15
}
.pulse-bars i {
  background:linear-gradient(#7bf6dc,#b9b4f7);
  border-radius:4px
}
.scene-hud {
  padding-bottom:max(15px,env(safe-area-inset-bottom));
  background:linear-gradient(#061c2500,#061c25ed 40%)
}
.photo-viewer {
  background:#082935f2;
  border:1px solid #a7dfdb40;
  border-radius:22px;
  backdrop-filter:blur(18px)
}
.photo-viewer>img {
  max-height:68dvh;
  object-fit:contain;
  touch-action:pan-y
}
.photo-viewer::backdrop {
  backdrop-filter:blur(14px);
  background:#02151dd9
}
.trail-cursor {
  position:fixed;
  left:-100px;
  top:-100px;
  width:25px;
  height:25px;
  border-radius:50%;
  border:1px solid #9bf9e1aa;
  pointer-events:none;
  z-index:80;
  mix-blend-mode:screen;
  transition:width .2s,height .2s;
  opacity:0
}
.trail-cursor.active {
  width:48px;
  height:48px;
  background:#7bf6dc0a
}
.touch-ripple {
  position:fixed;
  pointer-events:none;
  width:12px;
  height:12px;
  border:1px solid #a4f8e2;
  border-radius:50%;
  z-index:90;
  box-shadow:0 0 25px #7bf6dc35
}
.gesture-note {
  position:absolute;
  bottom:12px;
  left:50%;
  translate:-50% 0;
  font-size:10px;
  color:#8cbbc1;
  letter-spacing:.5px;
  white-space:nowrap
}
.micro-message {
  position:fixed;
  bottom:90px;
  left:50%;
  translate:-50% 20px;
  opacity:0;
  pointer-events:none;
  border:1px solid #9beadd40;
  background:#0c3444e8;
  border-radius:30px;
  padding:13px 22px;
  font-size:11px;
  color:#caf5ea;
  z-index:85;
  transition:.3s;
  max-width:90%;
  width:max-content;
  text-align:center
}
.micro-message.show {
  opacity:1;
  translate:-50% 0
}
.reaction-badge {
  position:absolute;
  right:8%;
  bottom:9%;
  z-index:3;
  font-size:12px;
  background:#e2f5f0;
  color:#215267;
  border:1px solid #c4f1e7;
  padding:12px 18px;
  border-radius:40px 40px 40px 5px;
  rotate:7deg;
  box-shadow:0 10px 40px #082a3b30;
  animation:photo-bob 6s ease-in-out infinite
}
.route-flash {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:70;
  opacity:0;
  background:linear-gradient(115deg,#8ff1dd22,#bfc4fc22 50%,#99d9ee11);
  mix-blend-mode:screen
}
.slide-dust {
  position:absolute;
  width:6px;
  height:6px;
  pointer-events:none;
  border-radius:2px;
  background:var(--aqua);
  z-index:15
}
.photo-burst {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse,#d9fff23b,transparent 65%);
  border-radius:50%;
  opacity:0
}
@keyframes liquid-form {
  0% {
    border-radius:42% 58% 65% 35%/36% 54% 46% 64%;
    translate:0 0;
    rotate:-8deg
  }
  50% {
    border-radius:63% 37% 40% 60%/59% 30% 70% 41%;
    translate:1% -2%;
    rotate:3deg
  }
  100% {
    border-radius:38% 62% 58% 42%/40% 62% 38% 60%;
    translate:-2% 2%;
    rotate:-5deg
  }
}
@keyframes photo-bob {
  0%,100% {
    translate:0 0
  }
  50% {
    translate:0 -9px
  }
}
@keyframes meter {
  to {
    height:14px
  }
}
@keyframes route-out {
  to {
    opacity:0;
    transform:translateX(-5%) scale(.97);
    filter:blur(7px)
  }
}
@keyframes route-in {
  from {
    clip-path:polygon(0 0,0 0,0 100%,0 100%);
    transform:translateX(6%) scale(1.03);
    filter:blur(5px)
  }
  to {
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
    transform:none;
    filter:blur(0)
  }
}
::view-transition-old(root) {
  animation:route-out .45s cubic-bezier(.3,0,.7,1) both
}
::view-transition-new(root) {
  animation:route-in .65s cubic-bezier(.2,.8,.2,1) both
}
::view-transition-group(experience) {
  animation-duration:.55s
}
@media(max-width:1100px) {
  .portada h1 {
    font-size:8.6vw;
    max-width:620px
  }
  .cover-peek {
    width:27%;
    right:4%;
    top:35%;
    height:45%
  }
  .cover-peek>span {
    font-size:10px
  }
  .universe-art {
    left:4%;
    width:49%;
    height:55%;
    top:18%
  }
  .universe-copy {
    left:57%;
    top:22%;
    right:4%
  }
  .universe-title {
    font-size:43px
  }
  .universe-intro {
    font-size:13px
  }
  .reaction-badge {
    font-size:10px;
    right:4%;
    bottom:5%
  }
  .experience-tools {
    top:18px
  }
  .experience-tools label {
    font-size:7px
  }
  .sound-level {
    width:45px
  }
}
@media(max-width:760px) {
  .experience-tools {
    left:auto;
    right:17px;
    top:16px;
    transform:none;
    gap:5px;
    padding:4px 7px
  }
  .sound-button {
    font-size:0;
    gap:5px;
    padding:4px
  }
  .sound-button>span:first-child {
    font-size:18px
  }
  .sound-meter {
    width:12px
  }
  .experience-tools label {
    gap:3px;
    font-size:0
  }
  .sound-level {
    width:38px
  }
  .tools-divider {
    height:13px
  }
  .motion-button,.fullscreen-button {
    width:22px;
    height:22px;
    font-size:16px
  }
  .navegacion {
    top:67px
  }
  .brand {
    top:25px;
    left:6%;
    font-size:9px
  }
  .portada {
    padding:105px 7% 45px;
    align-items:flex-start;
    min-height:100svh
  }
  .portada-contenido {
    margin-top:4vh;
    position:relative;
    z-index:2
  }
  .portada h1 {
    font-size:clamp(48px,11vw,78px);
    line-height:1.06;
    max-width:100%;
    letter-spacing:-.06em
  }
  .portada h2 {
    font-size:14px;
    line-height:1.8;
    max-width:290px;
    margin:20px 0 24px
  }
  .portada-etiqueta {
    font-size:8px;
    letter-spacing:1px;
    margin-bottom:22px
  }
  .portada-entrar {
    padding:15px 22px;
    gap:40px;
    font-size:12px
  }
  .cover-peek {
    top:auto;
    bottom:2%;
    right:6%;
    width:55%;
    height:27%;
    max-height:200px;
    opacity:.85;
    z-index:1
  }
  .cover-peek img {
    max-height:180px
  }
  .cover-peek img:first-child {
    right:-4%;
    height:90%;
    top:-4%
  }
  .cover-peek img:nth-child(2) {
    left:0;
    height:95%;
    top:4%
  }
  .cover-peek>span {
    font-size:9px;
    bottom:0;
    right:2%;
    max-width:150px;
    background:#e4f7f17d;
    padding:5px 10px;
    border-radius:20px
  }
  .esfera-3 {
    display:none
  }
  .universe {
    padding:83px 6% 22px
  }
  .universe-art {
    position:relative;
    top:auto;
    left:auto;
    order:1;
    height:270px;
    min-height:230px;
    width:100%;
    margin:12px 0 8px;
    max-height:none
  }
  .hero-memory {
    width:52%!important;
    left:24%!important;
    top:0!important;
    height:90%!important;
    max-height:240px!important
  }
  .echo-one {
    left:0;
    top:18%;
    height:45%;
    width:23%
  }
  .echo-two {
    right:0;
    bottom:18%;
    width:23%;
    height:43%
  }
  .art-caption {
    font-size:14px!important;
    left:16%;
    bottom:0
  }
  .liquid-seam {
    height:95%;
    width:90%;
    left:5%;
    top:0
  }
  .universe-copy {
    position:relative;
    left:auto;
    top:auto;
    right:auto;
    order:2;
    padding-top:10px
  }
  .universe-title {
    font-size:clamp(31px,8.5vw,43px);
    margin-bottom:16px;
    line-height:1.1
  }
  .universe-intro {
    font-size:13px;
    line-height:1.85;
    margin-bottom:20px;
    max-width:none
  }
  .universe .eyebrow {
    font-size:8px;
    margin-bottom:14px
  }
  .universe-actions {
    gap:10px
  }
  .universe-actions .primary {
    font-size:11px;
    padding:15px 18px
  }
  .universe-actions .round {
    width:39px;
    height:39px
  }
  .reaction-badge {
    font-size:9px;
    padding:9px 12px;
    right:4%;
    bottom:9%;
    max-width:130px
  }
  .frequency {
    order:3;
    margin-top:20px;
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    padding-bottom:6px
  }
  .frequency-heading {
    font-size:8px;
    letter-spacing:.8px
  }
  .frequency-item {
    flex-basis:105px;
    font-size:10px
  }
  .gesture-note {
    display:none
  }
  main .photo-button img {
    max-height:260px!important;
    height:260px!important
  }
  .presentacion-imagen .photo-button img {
    height:240px!important
  }
  .raw-foto .photo-button img {
    height:255px!important
  }
  .raw-foto .photo-button {
    height:275px
  }
  .galeria {
    min-height:280px;
    max-height:300px
  }
  .galeria-viajes figcaption {
    font-size:15px;
    line-height:1.8
  }
  .connections {
    padding-bottom:60px
  }
  .scene-hud {
    padding:13px 5%;
    gap:10px
  }
  .scene-position {
    font-size:8px
  }
  .text-control {
    font-size:10px
  }
  .photo-viewer>img {
    max-height:60dvh
  }
  .trail-cursor {
    display:none
  }
  .micro-message {
    font-size:10px;
    bottom:75px;
    padding:12px 18px
  }
  .photo-button::after {
    width:25px;
    height:25px;
    font-size:13px
  }
  .gustos figure {
    max-height:280px
  }
}
@media(max-width:380px) {
  .portada-contenido {
    margin-top:1vh
  }
  .portada h1 {
    font-size:clamp(44px,11.6vw,60px)
  }
  .portada h2 {
    font-size:13px
  }
  .cover-peek {
    height:25%;
    width:52%;
    bottom:2%
  }
  .brand {
    font-size:8px
  }
  .experience-tools {
    right:12px
  }
  .experience-tools .tools-divider {
    display:none
  }
  .sound-level {
    width:32px
  }
  .universe-art {
    height:230px;
    min-height:210px
  }
  .hero-memory {
    max-height:200px!important
  }
  .universe-title {
    font-size:31px
  }
  .reaction-badge {
    font-size:8px;
    padding:8px 10px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .trail-cursor {
    display:none
  }
}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after {
  animation:none!important;
  transition:none!important
}
.reduce-motion .trail-cursor {
  display:none
}
.reduce-motion .hero-memory {
  transform:rotate(-6deg)
}
.hero-memory {
  width:auto!important;
  max-width:65%;
  height:330px;
  left:28%;
}
.art-caption {
  display:none
}
.frequency-item {
  background:none;
  border-radius:0;
  border:0;
  border-bottom:1px solid #9ad7d326;
  box-shadow:none
}
.frequency-item[aria-pressed=true] {
  background:linear-gradient(0deg,#7bf6dc12,transparent);
  border-bottom:2px solid var(--aqua);
  box-shadow:none
}
@media(max-width:760px) {
  .nav-abrir {
    top:63px;
    right:6%;
    padding:10px 16px;
    font-size:10px
  }
  .nav-secciones {
    padding-top:125px
  }
  .hero-memory {
    width:auto!important;
    height:235px!important;
    max-width:62%;
    left:31%!important
  }
}
@media(max-width:380px) {
  .hero-memory {
    height:200px!important
  }
  .experience-tools {
    right:10px
  }
}
/* FOTOS: marco fino, proporción real y respuesta sin zoom. */
.photo-mat{display:inline-grid;place-items:center;position:relative;width:fit-content;max-width:100%;padding:7px;border:1px solid #b5d8d333;border-radius:12px;background:linear-gradient(145deg,#a2d7d80b,#0a253180);box-shadow:0 5px 16px #00101626;overflow:hidden;isolation:isolate;transform:perspective(850px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;}
.photo-mat::after{content:'';position:absolute;inset:-20% -70%;background:linear-gradient(105deg,transparent 40%,#effff217 48%,#effff229 50%,transparent 58%);transform:translateX(-60%);pointer-events:none;z-index:2;opacity:0}
.photo-mat::before{content:'';position:absolute;inset:3px;border-radius:9px;border:1px solid #ffffff06;pointer-events:none;z-index:2;transition:border-color .4s}
main .photo-button{display:grid;place-items:center;border-radius:12px;background:none;overflow:visible}
main .photo-button .photo-mat>img{width:auto!important;height:auto!important;max-width:100%!important;max-height:300px!important;object-fit:contain!important;border-radius:6px!important;box-shadow:none!important;transition:filter .4s;filter:none!important;mask-image:none!important}
main .photo-button:hover .photo-mat,main .photo-button:focus-visible .photo-mat{--lift:-4px;border-color:#9edcd97a;box-shadow:0 10px 25px #001b3c35}
main .photo-button:hover .photo-mat::after,main .photo-button:focus-visible .photo-mat::after{animation:frame-sheen .85s ease-out both}
main .photo-button:hover .photo-mat::before{border-color:#d3f9ec1c}
main .photo-button:active .photo-mat{--lift:1px;transition-duration:.12s}
.photo-button::after{right:calc(50% - 12px);bottom:12px;opacity:0;font-size:12px;background:#092c3bde;width:25px;height:25px;transition:opacity .3s,translate .3s;transform:none!important;translate:0 4px}
.photo-button:hover::after,.photo-button:focus-visible::after{opacity:1;translate:0 0}
.presentacion-imagen{display:flex;align-items:center;justify-content:center;gap:22px;min-height:360px;perspective:1000px}
.presentacion-imagen .photo-button,.presentacion-imagen .photo-button:last-child{position:relative;top:auto;left:auto;width:auto;max-width:48%;opacity:1;transform:none!important;transition:translate .8s cubic-bezier(.22,.8,.2,1),opacity .5s;z-index:1}
.presentacion-imagen .photo-button:first-child{translate:0 -14px}
.presentacion-imagen .photo-button:last-child{translate:0 14px}
.presentacion-imagen.reversed .photo-button:first-child{translate:calc(100% + 22px) 14px;opacity:1}
.presentacion-imagen.reversed .photo-button:last-child{translate:calc(-100% - 22px) -14px;opacity:1}
.presentacion-imagen .photo-mat{border-radius:10px}
.raw-foto .photo-button{height:320px}.raw-foto .photo-mat{max-height:314px}
.galeria-viajes figure{gap:4vw;grid-template-columns:1fr 1fr}
.galeria-viajes .photo-button{max-width:600px;justify-self:center}
.galeria-viajes figcaption{font-size:17px;max-width:380px;border-color:#a6d7d533;padding-left:22px}
.galeria-viajes figcaption::before{content:'↳';display:block;font-family:ECVSymbols,Arial,sans-serif;color:#90c5c5;font-size:23px;margin-bottom:8px}
.hero-memory{rotate:0deg;transform:translate3d(var(--mx),var(--my),0) rotate(-3deg);border:1px solid #b1d8d34a!important;border-radius:11px!important;padding:6px;box-shadow:0 10px 32px #00132045}
.echo-one{transform:translate(calc(var(--mx) * -1),calc(var(--my) * -.6)) rotate(-5deg);rotate:0deg}
.echo-two{transform:translate(calc(var(--mx) * -.7),calc(var(--my) * -.8)) rotate(5deg);rotate:0deg}
.echo{border-radius:10px!important;border-color:#b1d8d332;box-shadow:0 8px 20px #00132035}
.cover-peek img{border-radius:10px;padding:5px;border:1px solid #effffac2;box-shadow:0 10px 30px #427a9828}
.cover-peek img:first-child{rotate:5deg}.cover-peek img:nth-child(2){rotate:-4deg}
/* MOVIMIENTO: cada zona conserva una respuesta propia. */
@keyframes frame-sheen{0%{transform:translateX(-60%);opacity:0}20%{opacity:1}100%{transform:translateX(60%);opacity:0}}
@keyframes caption-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes reveal-words{from{clip-path:inset(0 0 100% 0);translate:0 20px}to{clip-path:inset(0);translate:0 0}}
@keyframes photo-uncover{from{clip-path:inset(0 100% 0 0 round 10px);opacity:.25}to{clip-path:inset(0 round 10px);opacity:1}}
@keyframes portrait-uncover{from{clip-path:inset(18% 0 18% 0 round 10px);opacity:0}to{clip-path:inset(0 round 10px);opacity:1}}
@keyframes little-nod{0%,100%{rotate:0deg}40%{rotate:-4deg}75%{rotate:2deg}}
@keyframes line-travel{from{background-position:160% 0}to{background-position:-60% 0}}
@keyframes thumb-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes photo-click{0%{opacity:0}15%{opacity:.22}100%{opacity:0}}
@keyframes pulse-soft{0%,100%{opacity:.35}50%{opacity:.75}}
@keyframes title-underline{from{scale:0 1}to{scale:1 1}}
@keyframes idea-slide{from{opacity:0;translate:20px 0}to{opacity:1;translate:0 0}}
@keyframes cover-line{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.portada h1>span{display:inline-block;animation:cover-line 1.1s .3s cubic-bezier(.2,.8,.2,1) backwards}
.portada-entrar .icono-entrar{transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.portada-entrar:hover .icono-entrar{translate:5px 0}
.esfera-3{animation:liquid-form 15s ease-in-out infinite alternate}
.universe-art::before{animation:pulse-soft 8s ease-in-out infinite}
.universe-actions .primary::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent,#ffffff24,transparent);background-size:200% 100%;opacity:0;pointer-events:none}
.universe-actions .primary{position:relative;overflow:hidden}
.universe-actions .primary:hover::after{opacity:1;animation:line-travel .8s ease-out}
.frequency-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#c4f9ea,transparent);background-size:200% 100%;opacity:0}
.frequency-item{position:relative}
.frequency-item:hover::after{opacity:1;animation:line-travel 1s ease-out}
.frequency-item[aria-pressed=true]>span:last-child{animation:caption-in .4s ease-out}
.scene-enter>h2{animation:reveal-words .65s cubic-bezier(.22,.8,.2,1) both}
.scene-enter .thumbnail-strip .thumbnail{animation:thumb-arrive .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--thumb-order,0)*45ms)}
.scene-enter .photo-mat{animation:photo-uncover .85s cubic-bezier(.22,.8,.2,1) backwards}
#identidad.scene-enter .photo-mat{animation-name:portrait-uncover;animation-duration:.9s}
#identidad.scene-enter .photo-button:last-child .photo-mat{animation-delay:.15s}
#en-orbita.scene-enter .photo-mat{animation-name:photo-uncover;animation-duration:1s}
#en-orbita .learning-topic:not([hidden]){animation:caption-in .5s ease-out}
#codigo-abierto .project-story:not([hidden]){animation:caption-in .55s ease-out}
#mi-lado-off .gustos>div:not([hidden]) h3{animation:reveal-words .5s ease-out}
#mi-lado-off .pulse-bars:hover i{animation-play-state:running}
#viajes.scene-enter figcaption,#after-hours.scene-enter figcaption{animation:caption-in .65s .2s ease-out backwards}
#after-hours .flash-toggle[aria-pressed=true]{animation:little-nod .5s ease-out}
#la-crew .photo-mat:hover{border-color:#ccd3e888}
#raw .raw-controls button:hover{animation:little-nod .45s ease-out}
#unreleased .ideas article:not([hidden]){animation:idea-slide .55s cubic-bezier(.2,.8,.2,1)}
#unreleased .idea-choices button[aria-pressed=true]{background:linear-gradient(100deg,#a5d5df12,transparent)}
.mode-switch button{position:relative;overflow:hidden;transition:background .3s,color .3s}
.mode-switch button::after{content:'';height:1px;position:absolute;bottom:2px;left:12px;right:12px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s}
.mode-switch button:hover::after,.mode-switch button[aria-selected=true]::after,.mode-switch button[aria-pressed=true]::after{transform:scaleX(1)}
.connections>.connection img{transition:rotate .4s cubic-bezier(.22,.8,.2,1),filter .3s}
.connections>.connection:hover img{rotate:-5deg;filter:saturate(1.12)}
.scene-hud::before{content:'';height:1px;position:absolute;left:4vw;right:4vw;top:0;background:linear-gradient(90deg,transparent,#a2d7df39,transparent);background-size:200% 100%;animation:line-travel 9s ease-in-out infinite}
.photo-viewer[open]{animation:portrait-uncover .35s ease-out}
.photo-viewer .viewer-close{transition:background .25s,color .25s}
.photo-viewer .viewer-close:hover{background:#a5d9d81c;color:var(--aqua)}
.motion-enhanced .reveal-unit{transition:opacity .65s ease,translate .65s cubic-bezier(.2,.8,.2,1)}
.motion-enhanced .reveal-unit:not(.is-seen){opacity:0;translate:0 14px}
.motion-enhanced .reveal-unit.is-seen{opacity:1;translate:0 0}
@media(hover:none){.photo-button::after{opacity:.8;translate:0 0}.photo-mat{transform:none!important}}
@media(max-width:760px){
 main .photo-button .photo-mat>img{max-height:245px!important}
 .presentacion-imagen{min-height:290px;gap:14px}
 .presentacion-imagen .photo-button,.presentacion-imagen .photo-button:last-child{max-width:47%}
 .presentacion-imagen.reversed .photo-button:first-child{translate:calc(100% + 14px) 14px}
 .presentacion-imagen.reversed .photo-button:last-child{translate:calc(-100% - 14px) -14px}
 .presentacion-imagen .photo-mat>img{max-height:225px!important}
 .galeria-viajes figure{grid-template-columns:1fr;gap:18px}
 .galeria-viajes figcaption{font-size:14px;max-width:100%;padding-left:16px}
 .galeria-viajes figcaption::before{display:none}
 .raw-foto .photo-button{height:270px}
 .photo-mat{padding:5px;border-radius:9px}
 .photo-mat>img{border-radius:4px!important}
}
@media(prefers-reduced-motion:reduce){.motion-enhanced .reveal-unit{opacity:1!important;translate:0 0!important}.photo-mat{transform:none!important}}
.reduce-motion .reveal-unit{opacity:1!important;translate:0 0!important}.reduce-motion .photo-mat{transform:none!important}
/* El beat procede del archivo recortado, no de una animación aleatoria. */
.enter-silent{display:inline-block;border:0;background:none;color:#35667b;border-bottom:1px solid #35667b44;padding:9px 0;margin-left:23px;font-size:11px;transition:color .25s,translate .25s}
.enter-silent:hover{color:#113f50;translate:3px 0}
.sfx-toggle{font:8px Arial,sans-serif;width:24px;height:24px;border:1px solid #9acdc940;border-radius:7px;color:inherit;background:#9acdc910}
.sfx-toggle[aria-pressed=false]{opacity:.4;text-decoration:line-through}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 35% 70%,#70e6cf1a,transparent 65%);opacity:calc(var(--beat,0)*.7);transition:opacity .08s linear}
body[data-view=cover]::after{display:none}
.beat-playing .liquid-seam{box-shadow:0 0 calc(20px + var(--beat,0)*60px) #8ff4de1a,inset 0 0 35px #99def00d}
.beat-playing .sound-meter i{animation-duration:.35s}
.beat-playing #mi-lado-off .pulse-bars i{animation:none!important;transform-origin:bottom;transform:scaleY(calc(.3 + var(--beat,0)*1.7));transition:transform .08s linear;opacity:.85}
#mi-lado-off .pulse-bars{height:80px;align-items:center}
.beat-playing #mi-lado-off .pulse-bars{opacity:1;visibility:visible}
/* Nueve entradas: cortes y direcciones diferentes, misma identidad aqua. */
@keyframes enter-person{from{opacity:.1;clip-path:inset(0 45% round 16px);translate:0 22px}to{opacity:1;clip-path:inset(0 round 0);translate:0 0}}
@keyframes enter-study{from{clip-path:inset(0 0 100%);translate:0 -35px;opacity:.3}to{clip-path:inset(0);translate:0 0;opacity:1}}
@keyframes enter-project{from{clip-path:polygon(0 0,12% 0,0 100%,0 100%);translate:-40px 0}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);translate:0 0}}
@keyframes enter-off{from{clip-path:circle(0 at 65% 50%);opacity:.4}to{clip-path:circle(120% at 65% 50%);opacity:1}}
@keyframes enter-trip{from{translate:80px 0;filter:blur(12px);opacity:0}to{translate:0 0;filter:blur(0);opacity:1}}
@keyframes enter-night{0%{clip-path:inset(49% 0);filter:brightness(.3)}60%{clip-path:inset(0);filter:brightness(1.12)}100%{clip-path:inset(0);filter:brightness(1)}}
@keyframes enter-friends{from{translate:0 55px;rotate:-2deg;opacity:0}to{translate:0 0;rotate:0deg;opacity:1}}
@keyframes enter-roll{from{clip-path:inset(0 0 0 100%);filter:saturate(0);opacity:.3}to{clip-path:inset(0);filter:saturate(1);opacity:1}}
@keyframes enter-plans{from{transform:perspective(1500px) rotateY(-12deg);transform-origin:left;opacity:0;filter:blur(3px)}to{transform:perspective(1500px) rotateY(0);transform-origin:left;opacity:1;filter:blur(0)}}
html[data-scene=identidad]::view-transition-new(experience){animation:enter-person .8s cubic-bezier(.2,.8,.2,1) both}
html[data-scene=en-orbita]::view-transition-new(experience){animation:enter-study .7s cubic-bezier(.2,.8,.2,1) both}
html[data-scene=codigo-abierto]::view-transition-new(experience){animation:enter-project .8s cubic-bezier(.2,.8,.2,1) both}
html[data-scene=mi-lado-off]::view-transition-new(experience){animation:enter-off .8s cubic-bezier(.2,.8,.2,1) both}
html[data-scene=viajes]::view-transition-new(experience){animation:enter-trip .7s cubic-bezier(.2,.8,.2,1) both}
html[data-scene=after-hours]::view-transition-new(experience){animation:enter-night .8s cubic-bezier(.2,.8,.2,1) both}
html[data-scene=la-crew]::view-transition-new(experience){animation:enter-friends .7s cubic-bezier(.2,.8,.2,1) both}
html[data-scene=raw]::view-transition-new(experience){animation:enter-roll .75s cubic-bezier(.2,.8,.2,1) both}
html[data-scene=unreleased]::view-transition-new(experience){animation:enter-plans .8s cubic-bezier(.2,.8,.2,1) both}
#identidad.scene-enter .presentacion-texto{animation:enter-person .8s cubic-bezier(.2,.8,.2,1)}
#en-orbita.scene-enter .mode-switch{animation:enter-study .65s ease-out}
#codigo-abierto.scene-enter .proyecto>.photo-button{animation:enter-project .9s cubic-bezier(.2,.8,.2,1)}
#mi-lado-off.scene-enter .mode-switch{animation:enter-off .7s ease-out}
#viajes.scene-enter .galeria-viajes{animation:enter-trip .8s ease-out}
#after-hours.scene-enter .noches{animation:enter-night .9s ease-out}
#la-crew.scene-enter .amigos{animation:enter-friends .85s ease-out}
#raw.scene-enter .galeria{animation:enter-roll .9s cubic-bezier(.2,.8,.2,1)}
#unreleased.scene-enter .ideas{animation:enter-plans .85s cubic-bezier(.2,.8,.2,1)}
#en-orbita>h2{letter-spacing:1px;font:500 18px Arial,sans-serif}
#codigo-abierto .proyecto h3{font-size:clamp(35px,5vw,76px);letter-spacing:-.05em;background:linear-gradient(100deg,#8ff5df,#bdc8fa);background-clip:text;color:transparent}
#mi-lado-off>h2{font-size:clamp(27px,4vw,54px);font-style:italic;color:#cdbff2}
#after-hours>h2{letter-spacing:.09em;text-transform:uppercase;font-size:20px}
#la-crew>h2{font-size:clamp(30px,4vw,55px);font-weight:400;letter-spacing:-.03em}
#raw>h2{font:13px/1.7 monospace;letter-spacing:4px;text-transform:uppercase}
#unreleased>h2{font-size:clamp(30px,4vw,55px);font-weight:400}
@media(max-width:760px){.enter-silent{display:block;width:max-content;margin:12px 0 0;font-size:10px}.experience-tools{gap:3px;padding:4px 6px}.sound-level{width:30px}.sfx-toggle{width:20px;height:22px;font-size:7px}.experience-tools .tools-divider{display:none}}
@media(prefers-reduced-motion:reduce){body::after{display:none}.beat-playing .liquid-seam{box-shadow:none}.beat-playing #mi-lado-off .pulse-bars i{transform:none;transition:none}}
.reduce-motion::after{display:none}.reduce-motion .liquid-seam{box-shadow:none}.reduce-motion #mi-lado-off .pulse-bars i{transform:none!important}
/* COMPOSICIÓN: menos aire entre bloques, protagonismo elegido por sección. */
.immersive main{padding:94px max(5vw,calc((100vw - 1280px)/2)) 94px}
.immersive main>section{min-height:0;max-width:1280px}
main section>h2{margin-bottom:22px}.scene-number{margin-bottom:7px}
.connections{margin-top:26px;gap:20px;padding:17px 0 5px}
.presentacion{gap:4vw}.presentacion-imagen{min-height:330px}
.presentacion-texto p{margin-top:12px;margin-bottom:16px}
.proyecto{gap:14px 3vw;grid-template-columns:.7fr 1.3fr}
.proyecto>h3{margin-top:8px}.proyecto>.photo-button{max-height:none;box-shadow:none}
#codigo-abierto .proyecto>.photo-button .photo-mat>img{max-height:360px!important}
#en-orbita{gap:0 3vw}#en-orbita>.formacion{padding:12px 0}.mode-switch{margin-bottom:15px}
.imagenes-estudios{box-shadow:0 10px 25px #0002}.imagenes-estudios::before{padding:10px 16px}
#viajes .galeria-viajes figure{grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:30px}
#viajes .photo-mat>img{max-height:430px!important}
#viajes .galeria-viajes .photo-button{width:100%;max-width:760px}
#viajes .galeria-viajes figcaption{font-size:19px;line-height:1.65}
#viajes .thumbnail-strip{margin-top:16px}
#after-hours{grid-template-columns:.8fr 1.2fr;gap:0 3vw}
#after-hours .photo-mat>img{max-height:360px!important}
#after-hours .noches figcaption{margin-top:12px;font-size:12px}
.amigos{gap:3vw;padding:0 1vw}.amigos figcaption{margin-top:12px;font-size:13px}
#la-crew .photo-mat>img{max-height:350px!important}.crew-switch{margin-top:18px}
#raw .galeria{height:420px;min-height:390px;max-height:440px;width:min(960px,92%)}
#raw .raw-foto{height:400px;max-height:410px;width:74%}
#raw .raw-foto .photo-button{height:400px}
#raw .photo-mat{max-height:400px}#raw .photo-mat>img{max-height:385px!important}
.raw-controls{margin-top:12px}.interaction-hint{margin-top:10px}
.ideas{margin-left:5%;padding:8px 0 12px 25px}.ideas article p{font-size:15px}.idea-choices{gap:8px}
.universe{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:auto auto;align-content:center;align-items:center;gap:22px 5%;padding:105px 6% 35px}
.universe-art{position:relative;top:auto;left:auto;width:100%;height:min(64vh,570px);min-height:410px;max-height:570px;grid-column:1;grid-row:1/3;margin:0}
.universe-copy{position:relative;top:auto;left:auto;right:auto;max-width:none;grid-column:2;grid-row:1;padding:0}
.universe-title{margin-bottom:18px}.universe-intro{margin:0 0 22px;max-width:430px}
.universe .eyebrow{margin-bottom:18px}.discovery-count{margin-top:18px}
.frequency{position:relative;inset:auto;grid-column:2;grid-row:2;margin:0;min-width:0;max-width:100%;padding:0}
.frequency-options{scroll-snap-type:x mandatory;gap:10px;padding:8px 0 10px}.frequency-item{flex:0 0 100px;scroll-snap-align:start;padding:15px 8px}
.frequency-heading{font-size:8px}.frequency-heading span:last-child{display:none}
.universe .hero-memory{height:360px!important;max-height:400px!important;top:7%!important;left:27%!important}
.universe[data-facet=viajes] .hero-memory{height:410px!important;max-height:420px!important}
.universe[data-facet=raw] .hero-memory{height:390px!important}
.universe[data-facet=codigo-abierto] .hero-memory{height:310px!important;max-width:87%;left:5%!important}
.echo-one{left:-2%;top:8%;height:38%;width:28%}.echo-two{right:0;bottom:10%;height:33%;width:27%}
.gesture-note{bottom:3%}.liquid-seam{height:94%;width:100%;inset:0}
@media(max-width:1100px) and (min-width:761px){.universe{padding-left:5%;padding-right:5%;gap:20px 4%}.universe-art{height:480px;min-height:400px}.universe .hero-memory{height:330px!important}.universe[data-facet=viajes] .hero-memory{height:360px!important}.universe-title{font-size:38px}.universe-intro{font-size:13px}.universe-actions{flex-wrap:wrap}.universe .primary{font-size:11px}.frequency-item{flex-basis:94px}}
@media(max-width:760px){
 .portada{display:flex;flex-direction:column;justify-content:center;gap:0;padding:98px 7% 25px;min-height:100svh}
 .portada-contenido{margin:0;flex:none}.portada h1{font-size:clamp(45px,11vw,65px)}.portada-etiqueta{margin-bottom:15px}.portada h2{margin:15px 0 18px;font-size:13px}
 .cover-peek{position:relative;inset:auto;width:100%;height:205px;max-height:none;margin:20px 0 0;align-self:center;flex:none}
 .cover-peek img:first-child{right:5%;left:auto;height:92%;top:0}.cover-peek img:nth-child(2){left:12%;height:92%;top:5%}.cover-peek>span{bottom:-4px;right:4%;font-size:8px}
 .enter-silent{margin-top:8px;font-size:9px}
 .universe{display:flex;flex-direction:column;padding:110px 6% 26px;gap:13px;align-items:stretch}
 .universe-copy{order:1;padding:0;margin:0}.universe-title{font-size:32px;max-width:none;margin-bottom:12px}.universe .eyebrow{margin-bottom:11px}.universe-intro{font-size:12px;line-height:1.75;margin:0 0 16px}.discovery-count{margin-top:12px;font-size:8px}
 .universe-art{order:2;height:290px;min-height:275px;width:100%;margin:6px 0 0;flex:none;max-height:none}
 .universe .hero-memory{height:245px!important;max-height:260px!important;top:1%!important;left:30%!important}
 .universe[data-facet=viajes] .hero-memory,.universe[data-facet=raw] .hero-memory{height:270px!important;max-height:275px!important;left:25%!important}
 .universe[data-facet=codigo-abierto] .hero-memory{height:230px!important;left:5%!important}
 .frequency{order:3;margin:0;padding:0}.frequency-options{padding-bottom:8px}.frequency-item{flex-basis:96px;padding:12px 8px;font-size:9px}
 .immersive main{padding:110px 6% 82px}.immersive main>section{min-height:0}.connections{padding:14px 0 5px;margin-top:20px;gap:14px}
 .scene-number{font-size:8px}main section>h2{margin-bottom:18px}.presentacion{gap:20px}.presentacion-imagen{min-height:255px}
 #viajes .galeria-viajes figure{grid-template-columns:1fr;gap:15px}
 #viajes .photo-mat>img{max-height:345px!important}
 #viajes .galeria-viajes figcaption{font-size:14px;line-height:1.7;max-width:none}
 #after-hours{display:block}#after-hours .photo-mat>img{max-height:295px!important}
 #codigo-abierto .proyecto>.photo-button .photo-mat>img{max-height:280px!important}
 #la-crew .photo-mat>img{max-height:275px!important}.amigos{gap:18px}.crew-switch{margin-top:15px}
 #raw .galeria{height:330px;min-height:320px;max-height:350px;width:100%}#raw .raw-foto{height:315px;max-height:330px;width:78%}#raw .raw-foto .photo-button{height:315px}#raw .photo-mat>img{max-height:300px!important}
 .ideas{margin-left:0;padding-left:17px}.ideas article p{font-size:14px}
}
@media(min-width:761px){
 .universe{align-content:start;align-items:start;grid-template-rows:max-content 1fr;padding-top:116px}
 .universe-art{height:570px;min-height:520px}
 .universe .hero-memory{height:425px!important;max-height:435px!important}
 .universe[data-facet=viajes] .hero-memory{height:450px!important;max-height:460px!important}
 .universe[data-facet=raw] .hero-memory{height:430px!important}
 .universe[data-facet=codigo-abierto] .hero-memory{height:325px!important}
 .universe-copy{padding-top:20px}.frequency{align-self:start}
 .cover-peek{width:36%;height:64%;top:20%;right:4%}.cover-peek img{max-height:440px}
}
@media(max-width:1100px) and (min-width:761px){.universe-art{height:510px;min-height:460px}.universe .hero-memory{height:360px!important}.universe[data-facet=viajes] .hero-memory{height:390px!important}}
@media(max-width:760px){.portada{justify-content:flex-start;padding-top:112px}.cover-peek{height:clamp(220px,30vh,280px);margin-top:18px}.cover-peek img{max-height:260px}}
.photo-ribbon{display:none}
@media(min-width:761px){.universe-art{height:clamp(460px,57vh,570px);min-height:460px}.universe .hero-memory{height:clamp(360px,52vh,530px)!important;max-height:535px!important}}
@media(min-width:761px) and (min-height:850px){
 .universe{grid-template-rows:max-content 1fr auto}
 .photo-ribbon{display:block;grid-column:1/-1;grid-row:3;min-width:0;border-top:1px solid #a5d8d52b;padding-top:13px}
 .ribbon-caption{font:8px monospace;letter-spacing:2px;text-transform:uppercase;color:#84b8bd;display:block;margin-bottom:10px}
 .ribbon-track{display:flex;align-items:center;justify-content:space-between;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 1px 8px}
 .ribbon-track button{padding:4px;border:1px solid #a2d7d333;border-radius:7px;flex:none;transition:translate .35s,border-color .35s;background:#93cbd208;scroll-snap-align:start}
 .ribbon-track img{height:108px;width:auto;max-width:210px;object-fit:contain;border-radius:3px;display:block}
 .ribbon-track button:hover,.ribbon-track button:focus-visible{translate:0 -3px;border-color:#b0ece57a}
}
/* VISOR: continuidad desde la foto pulsada, cambio con relevo y retorno. */
.photo-viewer[open]{animation:viewer-room-in .3s ease-out;padding:68px 4vw 22px;gap:14px;overflow:hidden;border-radius:0}
.photo-viewer::backdrop{animation:viewer-backdrop-in .4s ease-out}
.photo-viewer>.viewer-image{position:relative;z-index:2;max-height:calc(100dvh - 175px);max-width:89vw;width:auto;height:auto;object-fit:contain;border-radius:6px;will-change:transform,opacity;box-shadow:0 14px 55px #0004}
.viewer-focus-frame{position:fixed;z-index:3;border:1px solid #c3e6df40;border-radius:12px;pointer-events:none;opacity:0;box-shadow:0 0 0 4px #84d3cd04;will-change:transform,opacity}
.viewer-focus-frame::after{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(105deg,transparent 42%,#ddfff52a 50%,transparent 58%);background-size:240% 100%;mix-blend-mode:screen;opacity:.4;animation:viewer-frame-light 1.1s ease-out both}
.viewer-ghost{position:fixed;z-index:1;pointer-events:none;overflow:hidden;border-radius:6px;will-change:transform,opacity;box-shadow:0 14px 45px #0003}
.viewer-ghost img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;border-radius:inherit}
.viewer-position{position:absolute;top:32px;left:50%;translate:-50% 0;z-index:5;font:10px monospace;letter-spacing:3px;color:#a6cbd0}
.viewer-close{z-index:5;transition:background .25s,border-color .25s,translate .25s;top:20px}
.viewer-close:hover{translate:0 -2px;border-color:#b5e6dc80}
.photo-viewer>.viewer-controls,.photo-viewer>#photo-description{position:relative;z-index:4}
.photo-viewer>.viewer-controls{margin-top:3px;gap:12px}
.photo-viewer>.viewer-controls button{transition:translate .3s,border-color .3s,background .3s}
.photo-viewer>.viewer-controls button:first-child:hover{translate:-4px 0;border-color:#aee3d880;background:#8ed9d414}
.photo-viewer>.viewer-controls button:last-child:hover{translate:4px 0;border-color:#aee3d880;background:#8ed9d414}
.photo-viewer[data-closing=true] .viewer-controls{pointer-events:none}
@keyframes viewer-room-in{from{background-color:#061c2590}to{background-color:#082935f2}}
@keyframes viewer-backdrop-in{from{backdrop-filter:blur(0);background:#02151d70}to{backdrop-filter:blur(14px);background:#02151dd9}}
@keyframes viewer-frame-light{from{background-position:180% 0;opacity:.1}40%{opacity:.5}to{background-position:-80% 0;opacity:.05}}
/* Ajustes pequeños de composición: reunir controles y contenido relacionado. */
#en-orbita .learning-topic h3{margin-bottom:14px}
#en-orbita .learning-topic p{margin-top:10px;margin-bottom:13px}
#mi-lado-off .gustos{gap:22px}
#unreleased .idea-choices{margin-top:14px;margin-bottom:18px}
#unreleased .ideas article h3{margin-bottom:16px}
.connections{margin-top:22px}
@media(max-width:760px){
 .photo-viewer[open]{padding:67px 5vw 20px;gap:12px}
 .photo-viewer>.viewer-image{max-width:88vw;max-height:calc(100dvh - 185px)}
 .photo-viewer>#photo-description{font-size:12px;line-height:1.6;max-width:88vw}
 .viewer-position{top:32px;left:23px;translate:0 0;font-size:9px}
 .viewer-close{top:19px;right:5vw;padding:11px 15px;font-size:11px}
 .viewer-focus-frame{border-radius:10px}
 .photo-viewer .round-label{padding:11px 16px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.viewer-image,.viewer-ghost,.viewer-focus-frame{will-change:auto}}
.reduce-motion .viewer-image,.reduce-motion .viewer-ghost,.reduce-motion .viewer-focus-frame{will-change:auto}
/* Los ajustes dejan el centro y pasan a una esquina discreta. */
.settings-shell{position:fixed;left:16px;bottom:78px;z-index:60;color:#b7d5d8}
.settings-toggle{position:relative;width:35px;height:35px;padding:8px;border:1px solid #a2d6d32b;border-radius:12px;background:#092c38a8;backdrop-filter:blur(12px);color:#9cc0c5;cursor:pointer;opacity:.7;transition:opacity .25s,border-color .25s,translate .25s}
.settings-toggle svg{width:18px;height:18px;display:block}
.settings-toggle:hover,.settings-toggle[aria-expanded=true]{opacity:1;border-color:#a5dbd479;translate:0 -2px}
.beat-playing .settings-toggle::after{content:'';width:4px;height:4px;position:absolute;right:4px;top:4px;border-radius:50%;background:#91dfce}
.experience-tools.settings-panel{position:absolute;inset:auto auto 46px 0;transform:none;display:grid;grid-template-columns:repeat(3,1fr);width:280px;max-width:calc(100vw - 30px);padding:16px;gap:13px;border:1px solid #b0d8d43b;border-radius:17px;background:#0a2c39f2;color:#d3e9e9;box-shadow:0 12px 45px #00121d66;backdrop-filter:blur(20px);animation:settings-in .25s ease-out}
[data-view=cover] .experience-tools.settings-panel{background:#e5f6f1f2;border-color:#ffffffaa;color:#194d60}
.settings-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;font:11px Arial,sans-serif;padding-bottom:8px;border-bottom:1px solid #9bcac535}
.settings-header button{border:0;background:none;color:inherit;font-size:20px;width:25px;height:25px;padding:0}
.settings-panel .sound-button{grid-column:1/-1;font-size:11px!important;padding:4px 0;gap:10px;justify-content:flex-start}
.settings-panel label{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px!important;color:inherit}
.settings-panel .sound-level{width:165px}
.settings-panel .tools-divider{display:none}
.settings-panel .sfx-toggle,.settings-panel .motion-button,.settings-panel .fullscreen-button{justify-self:center;width:38px;height:31px;border:1px solid #a0d3ce35;border-radius:9px;font-size:18px;background:#a7d9d20a}
.settings-panel .sfx-toggle{font-size:10px}
@keyframes settings-in{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
/* Selector circular: acceso a las nueve secciones y a la intro. */
.route-orb-dialog{width:min(650px,94vw);max-width:94vw;max-height:92dvh;overflow:auto;padding:21px 24px 18px;border:1px solid #a4dcd63d;border-radius:24px;background:radial-gradient(ellipse at 50% 48%,#16414c,#082532 70%);color:#cee9e7;box-shadow:0 20px 90px #00101a80}
.route-orb-dialog::backdrop{background:#021923bf;backdrop-filter:blur(15px);animation:viewer-backdrop-in .3s ease-out}
.route-orb-dialog>header{display:flex;align-items:center;justify-content:space-between;font:11px Arial,sans-serif;color:#9bbdc4;padding-bottom:12px;border-bottom:1px solid #a2cfc82b}
.route-close{width:31px;height:31px;border:1px solid #a3d4ce35;border-radius:50%;background:none;color:inherit;font-size:22px}
.route-orb{position:relative;width:100%;aspect-ratio:1/1;margin:12px auto 0}
.route-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#b1dfd421;stroke-width:.17;pointer-events:none}
.route-ring circle:last-child{stroke:#b4c9ed1a;stroke-dasharray:.5 1.5;animation:route-line-draw 5s ease-out both}
.route-stop{position:absolute;left:var(--route-x);top:var(--route-y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;width:110px;min-height:55px;padding:8px 2px;border:0;background:none;color:#b9d7da;font-size:11px;line-height:1.35;text-align:center;animation:route-stop-in .45s ease-out both;animation-delay:calc(var(--route-order)*25ms)}
.route-stop i{display:grid;place-items:center;width:27px;height:27px;border:1px solid #b1d7d43d;border-radius:50%;font:8px monospace;font-style:normal;background:#103542;transition:background .3s,border-color .3s,rotate .3s}
.route-stop:hover,.route-stop:focus-visible{color:#9bf4de}
.route-stop:hover i,.route-stop:focus-visible i{border-color:#a7e8dc;background:#22616a;rotate:-8deg}
.route-stop[aria-current=true] i{background:#8ce5cf;color:#123c49;border-color:#a9f3df}
.replay-intro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:122px;height:122px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px solid #a3d9d447;border-radius:50%;background:radial-gradient(circle at 35% 25%,#93e4d121,#152f43);color:#aee7df;transition:background .3s,box-shadow .3s}
.replay-intro>span{font-family:ECVSymbols,Arial,sans-serif;font-size:29px;transition:rotate .5s}
.replay-intro>b{font:11px Arial,sans-serif;font-weight:400}
.replay-intro:hover{box-shadow:0 0 30px #80decf13;background:#154955}
.replay-intro:hover>span{rotate:-90deg}
@keyframes route-stop-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes route-line-draw{from{stroke-dashoffset:24;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@media(max-width:760px){
 .settings-shell{left:12px;bottom:76px}.settings-toggle{width:32px;height:32px;padding:6px}
 .experience-tools.settings-panel{width:270px;gap:12px;padding:15px}
 .route-orb-dialog{padding:17px 13px 12px;border-radius:19px}
 .route-orb-dialog>header{font-size:10px;padding-bottom:9px}
 .route-stop{width:76px;gap:4px;font-size:9px;min-height:50px;padding:5px 1px}
 .route-stop i{width:22px;height:22px;font-size:7px}
 .replay-intro{width:91px;height:91px;gap:6px}
 .replay-intro>span{font-size:25px}.replay-intro>b{font-size:9px}
 .route-orb{margin-top:17px;margin-bottom:9px}
}
@media(max-width:360px){.route-stop{width:65px;font-size:8px}.replay-intro{width:80px;height:80px}.route-orb-dialog>header{font-size:9px}}
/* La portada tiene una sola entrada, preparada en el mismo cambio de vista. */
.motion-enhanced .portada-contenido,.motion-enhanced .portada h1>span{animation:none}
/* Capas de movimiento: luz de borde, desplazamientos y profundidad. */
.viewer-aura{position:fixed;inset:-15%;z-index:0;background-position:center;background-size:cover;filter:blur(85px) saturate(.65);opacity:.23;pointer-events:none;transition:background-image .4s;mask-image:radial-gradient(ellipse,#000,transparent 65%)}
.viewer-focus-frame>i{position:absolute;width:17px;height:17px;border-color:#b4f5df99;border-style:solid;border-width:0;box-shadow:0 0 15px #94edd715;pointer-events:none}
.viewer-focus-frame>i:nth-child(1){left:-2px;top:-2px;border-left-width:2px;border-top-width:2px;border-top-left-radius:9px;transform-origin:top left}
.viewer-focus-frame>i:nth-child(2){right:-2px;top:-2px;border-right-width:2px;border-top-width:2px;border-top-right-radius:9px;transform-origin:top right}
.viewer-focus-frame>i:nth-child(3){right:-2px;bottom:-2px;border-right-width:2px;border-bottom-width:2px;border-bottom-right-radius:9px;transform-origin:bottom right}
.viewer-focus-frame>i:nth-child(4){left:-2px;bottom:-2px;border-left-width:2px;border-bottom-width:2px;border-bottom-left-radius:9px;transform-origin:bottom left}
.viewer-position::after{content:'';position:absolute;left:0;right:0;bottom:-10px;height:1px;background:linear-gradient(90deg,#aeefdc,#a9c8ef);transform:scaleX(var(--photo-progress,1));transform-origin:left;transition:transform .75s cubic-bezier(.16,.85,.2,1);box-shadow:0 0 7px #9ee9db66}
.photo-viewer[data-treatment="1"] .viewer-focus-frame::after{animation:viewer-frame-light 1.3s ease-out both}
.scene-enter .connections .connection{animation:connection-settle .7s .3s backwards}
.scene-enter .connections .connection:last-child{animation-delay:.43s}
.connection{position:relative;overflow:hidden}
.connection::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#aceedb,transparent);transform:translateX(-110%);transition:transform .65s}
.connection:hover::after,.connection:focus-visible::after{transform:translateX(0)}
.connection img{transition:filter .5s,border-radius .5s,rotate .5s}
.connection:hover img,.connection:focus-visible img{filter:brightness(1.15);border-radius:10px;rotate:-5deg}
.mode-switch button,.idea-choices button{position:relative;overflow:hidden;transition:color .35s,background .4s,border-color .4s,box-shadow .4s}
.mode-switch button[aria-pressed=true],.mode-switch button[aria-selected=true],.idea-choices button[aria-pressed=true]{box-shadow:0 0 23px #93e0d110}
.mode-switch button::before,.idea-choices button::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#b2efdf18 50%,transparent 75%);translate:-120% 0}
.mode-switch button:hover::before,.idea-choices button:hover::after{animation:button-glint .85s ease-out}
.thumbnail img{transition:filter .4s,translate .45s}
.thumbnail:hover img,.thumbnail:focus-visible img{filter:brightness(1.2);translate:0 -2px}
.gallery-controls>span,.raw-controls>span{font-variant-numeric:tabular-nums}
.route-orb::before{content:'';position:absolute;inset:12%;border:1px solid transparent;border-top-color:#a9ecda50;border-bottom-color:#b6c5f039;border-radius:50%;pointer-events:none;animation:orbit-trace 18s linear infinite;mask-image:linear-gradient(#000,transparent 45%,#000)}
.route-orb::after{content:'';position:absolute;width:5px;height:5px;left:0;top:0;border-radius:50%;background:#bbf4e1;box-shadow:0 0 17px #8fe5d2;offset-path:ellipse(36% 36% at 50% 50%);animation:orbit-spark 16s linear infinite;pointer-events:none}
.route-ring circle:first-child{stroke-dasharray:180 54;animation:orbit-trace 36s linear infinite;transform-origin:50% 50%}
.route-stop i::after{content:'';position:absolute;inset:3px;border:1px solid #9be7d700;border-radius:50%;transition:inset .4s,border-color .4s}
.route-stop i{position:relative}
.route-stop:hover i::after,.route-stop:focus-visible i::after{inset:-5px;border-color:#9be7d75e}
.replay-intro::after{content:'';position:absolute;inset:-7px;border:1px dashed #b4e8e02c;border-radius:50%;pointer-events:none;animation:orbit-trace 30s linear infinite}
.settings-toggle svg{transition:rotate .45s,opacity .3s}
.settings-toggle[aria-expanded=true] svg{rotate:90deg}
.scene-hud .text-control{transition:color .3s,text-shadow .3s}
.scene-hud .text-control:hover{text-shadow:0 0 16px #a6edda66}
@keyframes orbit-trace{to{rotate:360deg}}
@keyframes orbit-spark{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes button-glint{from{translate:-120% 0}to{translate:120% 0}}
@keyframes connection-settle{from{opacity:0;translate:0 15px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
/* La escena anterior permanece debajo hasta completar la vuelta a portada. */
.immersive.returning-cover .portada{display:flex!important;position:fixed;inset:0;z-index:45;overflow:auto;pointer-events:none}
.returning-cover .portada .cover-peek{display:block}
/* Fotografías con cuerpo: el límite depende de la pantalla, no de 300 px. */
.immersive main{padding-left:5vw;padding-right:5vw}
.immersive main>section{max-width:1500px}
#identidad .presentacion-imagen .photo-mat>img,
#en-orbita .imagenes-estudios .photo-mat>img,
#codigo-abierto .proyecto>.photo-button .photo-mat>img,
#mi-lado-off .gustos .photo-mat>img,
#viajes .galeria-viajes .photo-mat>img,
#after-hours .noches .photo-mat>img,
#la-crew .amigos .photo-mat>img{max-height:clamp(420px,68dvh,820px)!important}
.presentacion{grid-template-columns:.85fr 1.15fr;gap:4vw}
.presentacion-imagen{min-height:clamp(440px,68dvh,800px)}
#after-hours{grid-template-columns:.68fr 1.32fr}
#after-hours .noches{width:100%;justify-self:stretch}
#after-hours .noches figure{max-width:none}
#after-hours .noches .photo-button{width:100%}
#after-hours .noches figcaption{font-size:13px;max-width:650px;margin:15px auto 0}
#viajes .galeria-viajes figure{grid-template-columns:1.5fr 1fr;gap:3vw}
#viajes .galeria-viajes .photo-button{max-width:none}
#raw .galeria{width:min(1200px,100%);height:clamp(470px,70dvh,830px);max-height:none;min-height:0}
#raw .raw-foto{height:100%;max-height:none;width:75%}
#raw .raw-foto .photo-button{height:100%;width:100%}
#raw .raw-foto .photo-mat{max-height:100%}
#raw .raw-foto .photo-mat>img{max-height:clamp(450px,66dvh,790px)!important}
/* Un pequeño equipo de sonido: profundidad, reflejo y volumen real. */
.beat-console{grid-column:1;width:100%;min-width:0;padding:18px 20px 15px;border:1px solid #a4d8d53b;border-radius:19px;background:linear-gradient(145deg,#35666b23,#071e31bd);box-shadow:inset 0 1px #c6f9ed18,0 20px 45px #00151e38;position:relative;isolation:isolate;overflow:hidden;margin-top:12px}
.beat-console::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 72%,#8be4cc15,transparent 65%);opacity:calc(.3 + var(--beat,0)*.7);pointer-events:none}
.beat-console-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font:9px monospace;letter-spacing:1px;text-transform:uppercase;color:#9dbec7}
.beat-state{font-size:8px;color:#9ae4ce;letter-spacing:.5px;display:flex;gap:6px;align-items:center}
.beat-state::before{content:'';height:4px;width:4px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.beat-stage{position:relative;display:grid;place-items:center;height:170px;perspective:600px;isolation:isolate}
.beat-depth{position:absolute;inset:40% 4% 10%;border:1px solid #ace6d927;border-radius:50%;transform:rotateX(65deg);background:repeating-radial-gradient(ellipse,#9ae9d900 0 19px,#9ae9d915 20px 21px);box-shadow:0 0 40px #7eddd81a}
#mi-lado-off .beat-console .pulse-bars{height:130px;max-width:none;width:94%;gap:clamp(3px,.65vw,9px);z-index:1;align-items:center;transform:rotateX(-5deg);filter:drop-shadow(0 8px 12px #67d4cc2e);position:relative}
#mi-lado-off .beat-console .pulse-bars i{max-width:none;min-width:3px;height:var(--level);border-radius:6px;background:linear-gradient(180deg,#c5ffeb,#7edfd0 38%,#a3a0e9);box-shadow:inset 1px 0 #e5fff760,0 0 12px #a3e6dc26;transform-origin:center;transform:scaleY(.28);transition:transform .15s;opacity:.75}
.beat-playing #mi-lado-off .beat-console .pulse-bars i{transform:scaleY(calc(.22 + var(--beat,0)*(.7 + var(--i)*.035)));opacity:1}
#mi-lado-off.pulse-on .beat-console .pulse-bars i{animation:console-dance .8s calc(var(--i)*-.063s) ease-in-out infinite alternate}
.beat-console-footer{display:flex;align-items:center;gap:18px;justify-content:space-between;border-top:1px solid #b0e5d51c;padding-top:13px}
.gustos .beat-console .round-label{margin:0;font-size:10px;padding:10px 15px;white-space:nowrap}
.beat-track{height:3px;border-radius:5px;flex:1;background:#89bbb52b;overflow:hidden}
.beat-track i{display:block;width:30%;height:100%;background:#b3e9d8;box-shadow:0 0 10px #adf5db;animation:console-travel 5s ease-in-out infinite alternate}
.beat-console:hover .beat-depth{border-color:#c6f5e85c;transition:border-color .5s}
@keyframes console-dance{from{transform:scaleY(.25)}to{transform:scaleY(.95)}}
@keyframes console-travel{from{translate:0 0}to{translate:230% 0}}
/* Jarvis: una ilustración propia para un proyecto que todavía está en planes. */
.jarvis-avatar{position:relative;aspect-ratio:1;width:min(460px,95%);margin:auto;isolation:isolate;--look-x:0px;--look-y:0px}
.universe-art>.jarvis-avatar{display:none}
.universe[data-facet=unreleased] .universe-art>.jarvis-avatar{display:block;position:absolute;left:5%;top:0;width:90%;height:100%;aspect-ratio:auto}
.universe[data-facet=unreleased] .hero-memory,.universe[data-facet=unreleased] .echo{display:none!important}
.jarvis-halo{position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,#9ef7d329,#a9a8ed0b 55%,transparent 70%);filter:blur(15px);animation:jarvis-breathe 5s ease-in-out infinite alternate}
.jarvis-orbit{position:absolute;inset:10%;border:1px solid #a8ebdc35;border-radius:50%;rotate:-20deg;transform:rotateX(55deg);animation:jarvis-orbit 22s linear infinite}
.jarvis-orbit::after{content:'';position:absolute;top:15%;left:15%;width:8px;height:8px;border-radius:50%;background:#b7eddf;box-shadow:0 0 20px #99edd7}
.jarvis-orbit.orbit-two{inset:18% 7%;rotate:35deg;animation-direction:reverse;border-style:dashed;border-color:#c1bbee39;animation-duration:30s}
.jarvis-shell{position:absolute;inset:28% 23% 27%;border:1px solid #c6eee866;border-radius:30% 30% 38% 38%;background:linear-gradient(140deg,#b5e7de28,#1a4b5a 50%,#131f3f);box-shadow:inset 3px 3px 10px #c5f5e92b,inset -4px -6px 17px #011b3ebd,0 25px 45px #00162860;animation:jarvis-hover 5s ease-in-out infinite;transform:perspective(800px) rotateY(-9deg)}
.jarvis-antenna{position:absolute;left:50%;top:-17%;height:18%;width:2px;background:#a2dcca}
.jarvis-antenna::before{content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:#bdeddd;top:-6px;left:-4px;box-shadow:0 0 15px #b5f1d8}
.jarvis-face{position:absolute;inset:18% 11% 26%;border:1px solid #b4f1dc44;border-radius:30%;background:linear-gradient(135deg,#061f2e,#103647);box-shadow:inset 0 3px 10px #0006;display:flex;align-items:center;justify-content:center;gap:24%;translate:var(--look-x) var(--look-y);transition:translate .3s}
.jarvis-eye{display:block;width:12%;height:25%;border-radius:8px;background:#acffe4;box-shadow:0 0 13px #83f5cd80;animation:jarvis-blink 7s infinite}
.jarvis-eye:nth-child(2){animation-delay:.05s}
.jarvis-smile{position:absolute;bottom:14%;width:18%;height:13%;border-bottom:2px solid #a3e8d3;border-radius:50%}
.jarvis-base{position:absolute;bottom:11%;left:35%;right:35%;display:flex;gap:5px;justify-content:center}
.jarvis-base i{height:3px;width:20%;background:#b8dcf2;border-radius:4px;opacity:.5}
.jarvis-name{position:absolute;top:80%;left:0;right:0;text-align:center;font:13px monospace;letter-spacing:6px;color:#b3e9dc}
.jarvis-name>span{display:block;margin-top:11px;letter-spacing:1px;font:9px monospace;color:#8aa9bb}
#unreleased{display:grid;grid-template-columns:1.15fr .85fr;gap:0 3vw;align-items:start}
#unreleased>.scene-number,#unreleased>h2{grid-column:1/-1}
#unreleased .ideas{margin:0;padding:0;min-width:0}
#unreleased .ideas article{margin-left:0;padding-left:22px}
#unreleased .idea-choices{grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:24px}
.jarvis-preview{grid-column:2;grid-row:3;display:flex;flex-direction:column;align-items:center;min-width:0}
.jarvis-preview>p{font-size:11px;line-height:1.7;text-align:center;color:#8eabb4;max-width:270px;margin-top:13px}
.jarvis-preview>.jarvis-avatar{width:100%;min-height:330px}
.jarvis-greet{margin-top:0}
@keyframes jarvis-hover{0%,100%{translate:0 -6px}50%{translate:0 8px}}
@keyframes jarvis-breathe{to{opacity:.5;scale:1.15}}
@keyframes jarvis-blink{0%,43%,47%,100%{scale:1 1}45%{scale:1 .1}}
@keyframes jarvis-orbit{to{rotate:340deg}}
@media(max-width:760px){
 .immersive main{padding-left:6%;padding-right:6%}
 #identidad .presentacion-imagen .photo-mat>img{max-height:clamp(280px,49svh,480px)!important}
 #en-orbita .imagenes-estudios .photo-mat>img,#codigo-abierto .proyecto>.photo-button .photo-mat>img,#mi-lado-off .gustos .photo-mat>img,#viajes .galeria-viajes .photo-mat>img,#after-hours .noches .photo-mat>img,#la-crew .amigos .photo-mat>img{max-height:clamp(340px,64svh,660px)!important}
 .presentacion{grid-template-columns:1fr}.presentacion-imagen{min-height:350px}
 #after-hours{display:block}
 #viajes .galeria-viajes figure{grid-template-columns:1fr}
 #raw .galeria{height:clamp(400px,66svh,620px)}
 #raw .raw-foto .photo-mat>img{max-height:clamp(380px,62svh,590px)!important}
 .beat-console{padding:16px 13px}.beat-stage{height:155px}.beat-console-heading{font-size:8px}.beat-state{font-size:7px}
 .beat-console-footer{gap:10px}.gustos .beat-console .round-label{font-size:9px;padding:10px 12px}
 #unreleased{display:block}#unreleased .ideas{margin:0}.jarvis-preview{margin:10px auto 0;max-width:390px}
 .jarvis-preview>.jarvis-avatar{min-height:300px;max-width:340px}.jarvis-preview>p{font-size:10px}
 .universe[data-facet=unreleased] .universe-art{height:350px}
}
@media(prefers-reduced-motion:reduce){.beat-playing #mi-lado-off .beat-console .pulse-bars i{transform:none}.jarvis-avatar *{animation:none!important}}
.reduce-motion .beat-playing #mi-lado-off .beat-console .pulse-bars i{transform:none!important}
/* El acento es común; la luz y la máscara pertenecen a cada historia. */
.photo-viewer{--viewer-accent:#b3e7da}
.photo-viewer .viewer-focus-frame>i{border-color:var(--viewer-accent)}
.photo-viewer .viewer-position{color:var(--viewer-accent)}
.viewer-light-effect{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;mix-blend-mode:screen;background:linear-gradient(100deg,transparent 20%,var(--viewer-accent) 50%,transparent 80%)}
[data-gallery=identidad] .viewer-light-effect{background:linear-gradient(90deg,var(--viewer-accent),transparent 15% 85%,var(--viewer-accent))}
[data-gallery=en-orbita] .viewer-light-effect{background:repeating-linear-gradient(0deg,transparent 0 7px,#addafa 8px 9px)}
[data-gallery=codigo-abierto] .viewer-light-effect{background:linear-gradient(0deg,#a8f5d7,transparent 28%),linear-gradient(90deg,transparent 97%,#a8f5d7)}
[data-gallery=mi-lado-off] .viewer-light-effect{background:repeating-radial-gradient(ellipse at center,transparent 0 30px,#c9b5f3 31px 33px)}
[data-gallery=viajes] .viewer-light-effect{background:linear-gradient(100deg,transparent 30%,#c7f3dc 50%,transparent 65%)}
[data-gallery=after-hours] .viewer-light-effect{background:radial-gradient(ellipse,#f3d9ff,transparent 65%)}
[data-gallery=la-crew] .viewer-light-effect{background:linear-gradient(145deg,transparent 30%,#ffdaca 48%,transparent 65%)}
[data-gallery=raw] .viewer-light-effect{background:linear-gradient(0deg,#e8d6ab,transparent 80%);mix-blend-mode:soft-light}
#after-hours .noches .photo-mat{border-color:#c2b5e948;box-shadow:0 22px 65px #090c2d55}
#viajes .galeria-viajes .photo-mat{padding:9px;border-color:#b3e1cf4d;box-shadow:0 18px 45px #001f214d}
#la-crew .amigos .photo-mat{border-color:#ddc5bf45;box-shadow:0 15px 50px #121f3e45}
#raw .raw-foto.active .photo-mat{border-color:#e4dbbb55;box-shadow:0 20px 60px #0012195e}
@media(max-width:760px){#viajes .galeria-viajes .photo-mat{padding:6px}}
.gustos figure{max-height:none;align-self:start}
.gustos>div{align-items:start}
.beat-console{align-self:start}
#unreleased .idea-choices button{padding:15px 8px;font-size:11px}
#unreleased .idea-choices button::before{margin-bottom:10px;font-size:22px}
@media(min-width:761px){.gustos-musica{grid-template-rows:auto auto 1fr}.gustos-musica figure{grid-row:1/4}.gustos-musica .beat-console{grid-row:3}}
#mi-lado-off .beat-console .pulse-bars i{animation:console-idle 3.4s calc(var(--i)*-.11s) ease-in-out infinite alternate}
#mi-lado-off.pulse-on .beat-console .pulse-bars i{animation:console-dance .8s calc(var(--i)*-.063s) ease-in-out infinite alternate}
.gustos .beat-console-footer>.round-label{order:0}
@keyframes console-idle{from{transform:scaleY(.5)}to{transform:scaleY(.8)}}

.route-orb-dialog[data-closing=true]{pointer-events:none}
.route-orb-dialog[data-closing=true]::backdrop{animation:route-backdrop-out .28s ease-in both}
@keyframes route-backdrop-out{to{opacity:0;backdrop-filter:blur(0)}}
/* Jarvis mira desde los ojos y acompaña con la cabeza, también al tocarlo. */
.jarvis-shell{transform:perspective(800px) rotateY(calc(-9deg + var(--head-y,0deg))) rotateX(var(--head-x,0deg));transition:transform .35s ease-out,box-shadow .35s}
.jarvis-eye{translate:var(--eye-x,0px) var(--eye-y,0px);transition:translate .18s ease-out,box-shadow .35s}
.jarvis-touch{position:absolute;inset:23% 20% 25%;z-index:4;background:transparent;border:0;border-radius:35%;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.jarvis-touch:focus-visible{outline:2px solid #b3f6df;outline-offset:7px;box-shadow:0 0 25px #b3f6df25}
.jarvis-noticed .jarvis-eye{box-shadow:0 0 22px #a1ffe4cc}
.jarvis-noticed .jarvis-shell{box-shadow:inset 3px 3px 10px #c5f5e92b,inset -4px -6px 17px #011b3ebd,0 0 38px #94f4d624,0 25px 45px #00162860}
@media(prefers-reduced-motion:reduce){.jarvis-shell,.jarvis-eye{transition:none}}