/* Presentación del estudio. styles.css conserva los instrumentos y controles. */
:root {
  --bg: #080e19;
  --ink: #f0f3f9;
  --mute: #9eacbd;
  --ph: #64ffc3;
  --ph-glow: rgba(70, 255, 181, .4);
  --line: rgba(159, 190, 221, .2);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.scene {
  background: radial-gradient(ellipse at 48% 45%, #152235, #080e19 65%, #05080d);
}
.world { width: 1672px; height: 941px; }
.world.fly { transition: transform .85s cubic-bezier(.32, .72, .2, 1); }
.room-art, .room-effects, .room-hotspots {
  position: absolute; inset: 0; width: 1672px; height: 941px;
}
.room-art {
  display: block; object-fit: contain; user-select: none;
  transition: opacity .65s, filter .65s;
}
.room-flightcase {
  position: absolute; left: 1248px; top: 724px;
  mask-image: linear-gradient(to right, transparent, black 7px), linear-gradient(to bottom, transparent, black 5px);
  mask-composite: intersect;
}
#room-scope-face, .room-scope-brand {
  position: absolute; transform-origin: top left; transform: matrix(1, -.0275, .02, 1, 0, 0);
}
#room-scope-face { left: 184px; top: 581px; width: 110px; height: 70px; }
.room-scope-brand {
  left: 180px; top: 566px; padding: 0 3px; background: #332f2d;
  color: #e6dfcd; font: 600 6px/9px monospace;
}
.room-effects { pointer-events: none; transition: opacity .4s; }
.room-hotspots { pointer-events: none; }
.room-hit {
  position: absolute; padding: 0; background: transparent; border: 1px solid transparent;
  border-radius: 8px; cursor: pointer; pointer-events: auto;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.hit-scope { left: 140px; top: 555px; width: 254px; height: 132px; }
.hit-console { left: 1257px; top: 478px; width: 397px; height: 256px; }
.hit-window { left: 53px; top: 130px; width: 1197px; height: 251px; border-radius: 1px; }
.room-hit:hover, .room-hit:focus-visible {
  outline: none; border-color: rgba(100, 255, 195, .7);
  box-shadow: 0 0 22px rgba(75, 255, 190, .16), inset 0 0 18px rgba(75, 255, 190, .05);
  background: rgba(100, 255, 195, .025);
}
.obj { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s; }
.focus .obj.on { opacity: 1; visibility: visible; pointer-events: auto; }
.focus .obj:not(.on) { opacity: 0; }
.room-plate { position: absolute; inset: 0; pointer-events: none; transition: opacity .65s, filter .65s; }
.focus .room-plate { opacity: .12; filter: blur(4px) saturate(.65); }
.focus .room-plate .standby-art { opacity: 1; filter: none; }
.focus .room-effects { opacity: 0; }
.focus .room-hotspots { visibility: hidden; }

/* Los rótulos son botones reales, colocados sobre los de la referencia. */
.labels { z-index: 1; visibility: hidden; transition: opacity .25s; }
.labels.on { visibility: visible; }
.scene-plaque {
  position: absolute; height: 44px; padding: 0 18px 0 14px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  border: 1px solid #526e7e; border-radius: 99px;
  background: linear-gradient(180deg, #101b26, #060e15 55%, #091219);
  color: #f5f6fb; font: 600 21px/1 var(--mono); letter-spacing: .075em;
  text-transform: uppercase; white-space: nowrap; cursor: pointer; pointer-events: auto;
  box-shadow: inset 0 1px 1px rgba(205, 230, 250, .17), 0 2px 8px #03080d,
    -12px 4px 26px -8px rgba(57, 255, 170, .26);
  transition: border-color .2s, box-shadow .2s, color .2s;
}
.scene-plaque span {
  all: unset; display: inline;
}
.scene-plaque span::before { content: none; }
.scene-plaque i {
  position: relative; width: 17px; height: 17px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #b6ffe3, #54ffbd 45%, #00b979);
  border: 1px solid #90ffce;
  box-shadow: 0 0 0 3px #103e32, 0 0 0 4px #346252, 0 0 16px #35eaa7;
}
.scene-plaque:hover, .scene-plaque:focus-visible {
  outline: none; color: #b6ffe1; border-color: #8bffcf;
  box-shadow: 0 0 0 3px rgba(100, 255, 195, .2), 0 0 28px rgba(57, 255, 170, .3);
}
.home .top { background: none; padding: 0; }
.home .who-top {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.home #toContact { display: none; }
.room-hint {
  bottom: max(14px, env(safe-area-inset-bottom, 0px)); padding: 7px 12px;
  background: rgba(5, 12, 20, .6); color: #a3b8c8; border-color: rgba(133, 173, 200, .15);
  font-size: 9px; letter-spacing: .12em;
}
.top { padding-top: max(22px, env(safe-area-inset-top, 0px)); }
.back {
  background: linear-gradient(#182433, #0b131f); border-color: #405363;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 5px 20px #03080d;
}
.pill { background: #64ffc3; color: #052116; }
.panel {
  border: 1px solid #374c60; background: linear-gradient(145deg, rgba(18, 31, 45, .96), rgba(6, 14, 24, .97));
  box-shadow: inset 0 1px rgba(218, 236, 255, .08), 0 18px 60px rgba(0, 0, 0, .55);
  outline: none; border-radius: 16px 16px 0 0; max-height: 50svh;
}
.panel::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #78c4ec, transparent);
}
.panel .lead { color: #b9c7d6; }
.panel .k { line-height: 1.5; }
.panel .role { color: #adc0d0; }
.panel .chips li { border-color: rgba(100, 255, 195, .25); background: rgba(40, 128, 105, .1); }
.panel .btn { border-radius: 9px; }
.panel .btn.pri { background: #64ffc3; box-shadow: 0 5px 24px rgba(64, 230, 164, .12); }

@media (min-width: 920px) {
  .panel { left: 30px; bottom: 30px; width: 370px; border-radius: 13px; padding: 24px; max-height: calc(100svh - 130px); }
  .top { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 919px) and (orientation: portrait) {
  .home .top { padding: max(34px, env(safe-area-inset-top, 0px)) 24px 0; }
  .home .who-top {
    position: static; width: auto; height: auto; padding: 0; margin: 0;
    overflow: visible; clip-path: none; white-space: normal; gap: 10px;
  }
  .home .who-top b { font-size: clamp(26px, 5vw, 38px); letter-spacing: -.02em; }
  .home .who-top span { font-size: clamp(10px, 2.4vw, 14px); color: #bac7d7; }
  .home .scene { background: radial-gradient(ellipse at 50% 38%, #1b2d45, #080f1b 65%, #050a12); }
  .labels {
    inset: auto 24px max(52px, calc(env(safe-area-inset-bottom, 0px) + 38px));
    display: grid; gap: 12px; justify-items: stretch;
  }
  .scene-plaque {
    position: relative; left: auto !important; top: auto !important; transform: none !important;
    width: 100% !important; height: 52px; gap: 14px; justify-content: flex-start; padding-left: 24px;
    font-size: 15px; letter-spacing: .1em; border-color: #354e60;
  }
  .scene-plaque i { width: 13px; height: 13px; }
  .room-hint { font-size: 8px; letter-spacing: .06em; bottom: max(15px, env(safe-area-inset-bottom, 0px)); }
  .home .room-plate { clip-path: inset(112px 0 0); }
  .who-top b { font-size: 15px; }
  .who-top span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .world.fly, .room-plate, .room-art, .room-effects, .scene-plaque, .room-hit, .obj { transition: none; }
}

/* Primer plano de la ventana: una sola superficie desplazable también en móvil. */
.city-view[hidden], #cityExplorer[hidden] { display: none; }
.city-view {
  position: absolute; z-index: 1; inset: 80px 0 0; overflow: auto; overscroll-behavior: contain;
  padding: clamp(20px, 4vw, 64px); scrollbar-color: #344d60 #0a1520;
  background: linear-gradient(0deg, rgba(4, 10, 18, .92), rgba(8, 18, 29, .72));
}
.city-spread {
  max-width: 1480px; min-height: 100%; margin: auto; display: grid; align-content: center;
  grid-template-columns: minmax(240px, .82fr) minmax(0, 1.95fr);
  grid-template-areas: 'intro panorama' 'notes panorama'; gap: 26px clamp(26px, 4vw, 76px);
}
.city-intro { grid-area: intro; align-self: end; }
.city-eyebrow { color: #87eac8; font: 500 10px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.city-eyebrow span { color: #526d78; padding: 0 .35em; }
.city-intro h2 {
  font: 600 clamp(30px, 4.3vw, 70px)/.99 var(--sans); letter-spacing: -.045em;
  margin: .3em 0 .35em; text-wrap: balance; color: #eff5f9; outline: none;
}
.city-intro > p:last-child, .city-notes details p { color: #c0cfdb; font: 400 16px/1.58 var(--sans); }
.city-notes { grid-area: notes; align-self: start; }
.city-notes details { border-top: 1px solid #314252; }
.city-notes details:last-child { border-bottom: 1px solid #314252; }
.city-notes summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 3px; font: 500 15px/1.4 var(--sans); }
.city-notes summary::-webkit-details-marker { display:none; }
.city-notes summary::after { content: '+'; font: 400 20px/1 var(--mono); color: #83dcbf; }
.city-notes details[open] summary::after { content: '−'; }
.city-notes summary:hover { color: #93ffdc; }
.city-notes summary:focus-visible { outline: 2px solid #83dcbf; outline-offset: 2px; }
.city-notes details p { font-size: 14px; margin-bottom: 13px; }
#cityExplorer { grid-area: panorama; align-self: center; min-width: 0; width: 100%; height: clamp(320px, 29vw, 470px); }
@media (max-width: 919px) {
  .city-view { inset: 74px 0 0; padding: 20px max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .city-spread { max-width: 700px; align-content: start; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'intro' 'panorama' 'notes'; gap: 20px; }
  .city-intro h2 { margin: 8px 0 10px; }
  .city-intro > p:last-child { font-size: 15px; line-height: 1.48; }
  #cityExplorer { height: clamp(260px, 65vw, 350px); }
}

/* Párrafos justificados en todas las secciones (con guiones para que no queden huecos en el móvil). */
.boat-copy > p:not([class]), .mob-lead, .mob-notes p, .mob-footnote,
.city-intro > p:last-child, .city-notes details p, .ruta-intro, .ruta-foot,
.panel .lead {
  text-align: justify; -webkit-hyphens: auto; hyphens: auto;
}

/* Sin rótulos sobre la ilustración: se entra por los recuadros y por el muñeco guía.
   En el móvil en vertical siguen como botones bajo la habitación. */
.room-patch { position: absolute; pointer-events: none; }
@media not ((max-width: 919px) and (orientation: portrait)) {
  .labels { display: none; }
}
.panel .boat-status { margin-top: 16px; }
/* segundo punto bajo la misma línea */
.boat-status.status-next { margin-top: 8px; padding-top: 0; border-top: 0; }

/* Trayectoria con el formato del TFG y del TFM: texto suelto a la izquierda y la mesa al lado. */
@media (min-width: 920px) {
  .panel[data-view="console"] {
    top: 50%; bottom: auto; left: max(32px, 4vw); width: clamp(320px, 31vw, 470px);
    padding: 0; max-height: none; overflow: visible;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transform: translate(calc(-100% - 60px), -50%);
  }
  .panel[data-view="console"].on { transform: translateY(-50%); }
  .panel[data-view="console"]::before { display: none; }
  .panel[data-view="console"] .k { font: 500 10px/1.6 var(--mono); letter-spacing: .12em; color: #87eac8; }
  .panel[data-view="console"] .k b { color: #87eac8; }
  .panel[data-view="console"] h2 { margin: .25em 0; font: 600 clamp(32px, 3.7vw, 56px)/1.04 var(--sans); letter-spacing: -.04em; }
  .panel[data-view="console"] .lead { max-width: none; margin: 18px 0 28px; font: 400 17px/1.6 var(--sans); color: #c5d3da; }
  .panel[data-view="console"] .lead + .boat-status { margin-top: 0; }
}

@media (max-width: 919px) {
  .home #labels {
    inset: calc(var(--room-bottom) + 10px) 16px auto;
    display: flex;
    justify-content: center;
  }
  .home #labels [data-for]:not([data-for="scope"]) { display: none; }
  .home #labels [data-for="scope"] {
    position: static; transform: none !important; width: min(100%, 400px) !important;
    height: 46px; justify-content: center; font-size: 14px;
  }
  .home #roomHint {
    display: block; top: calc(var(--room-bottom) + 64px); bottom: auto;
    font-size: clamp(11px, 3.2vw, 14px); letter-spacing: .04em;
  }
}

.room-viewport { position: absolute; inset: 0; }
.hint-panorama { display: none; }
@media (max-width: 919px) {
  .room-viewport.panorama {
    top: var(--panorama-top); bottom: auto; height: var(--panorama-height);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: thin; scrollbar-color: #65d9b4 #0a1724;
    touch-action: pan-x; -webkit-overflow-scrolling: touch;
  }
  .room-viewport.panorama::after {
    content: ''; display: block; width: var(--panorama-width); height: 1px;
  }
  .home .room-plate { clip-path: inset(112px 0 0); }
}
@media (max-width: 919px) and (orientation: portrait) {
  .hint-desktop { display: none; }
  .hint-panorama { display: inline; }
}