/* Pantalla de las prácticas: tapa la de la ilustración y queda alineada con la mesa de sonido. */
.room-tv {position:absolute;left:1282px;top:174px;width:370px;height:208px;padding:7px;border-radius:7px;display:flex;flex-direction:column;background:linear-gradient(#1b232c,#0a0e13);box-shadow:0 0 0 1px #2c3742,inset 0 1px rgba(255,255,255,.07),0 22px 44px rgba(0,0,0,.62)}
.room-tv::after {content:'';position:absolute;right:11px;bottom:2px;width:3px;height:3px;border-radius:50%;background:#59ffbf;box-shadow:0 0 5px #59ffbf}
.room-tv-head {flex:none;height:28px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;background:#0d2936;color:#e9fff6;font:600 15px var(--sans)}
.room-tv-head small {color:#79e9c6;font:600 8px var(--mono);letter-spacing:.08em}
.room-tv canvas {display:block;width:356px;height:166px;background:#081b27}
.desk-retouch,.desk-retouch::before,.desk-retouch::after,.desk-retouch img {position:absolute;pointer-events:none}
.desk-retouch {inset:0}
.desk-retouch canvas {position:absolute;left:230px;top:670px;width:142px;height:68px}
.desk-retouch img {left:641px;top:683px;width:80px;height:40px;filter:drop-shadow(1px 2px 1px #311c11)}
.hit-practicas {left:1282px;top:174px;width:370px;height:208px}
.hit-banco {left:350px;top:530px;width:436px;height:203px}
.hit-barco {left:817px;top:428px;width:419px;height:223px}
.boat-layout {min-height:100%;max-width:1130px;margin:auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(28px,6vw,100px)}
.boat-copy h2 {margin:.25em 0;font:600 clamp(32px,3.7vw,56px)/1.04 var(--sans);letter-spacing:-.04em;text-wrap:balance;outline:none}
.boat-sub {font:500 12px/1.5 var(--mono);color:#9de8ce}
.boat-copy>p:not([class]) {font:400 17px/1.6 var(--sans);color:#c5d3da;margin:18px 0 28px}
.boat-status {display:flex;align-items:center;gap:10px;padding-top:16px;border-top:1px solid #314252;color:#93ffdc;font:500 15px/1.4 var(--sans)}
.boat-status i {flex:none;width:8px;height:8px;border-radius:50%;background:#64ffc3;box-shadow:0 0 10px #3fefbb}
.boat-figure {margin:0;border:1px solid #345063;border-radius:12px;overflow:hidden;background:#0a1723}
.boat-figure img {width:100%;display:block;max-height:55vh;object-fit:contain}
.boat-figure figcaption {display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:14px 16px;color:#d7e8eb;font:500 14px/1.5 var(--sans)}
.boat-figure figcaption span {color:#92acba;font:400 11px/1.8 var(--mono)}
@media(max-width:919px) {
  .boat-layout {min-height:0;max-width:640px;grid-template-columns:1fr;gap:24px}
  .boat-copy h2 {font-size:clamp(28px,7vw,44px)}
  .boat-copy>p:not([class]) {font-size:15px}
}
@media(max-width:919px) and (orientation:portrait) {
  .labels {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;left:16px;right:16px}
  .scene-plaque {padding:0 12px;gap:8px;font-size:clamp(10px,2.9vw,15px);letter-spacing:.025em}
  .scene-plaque[data-for="scope"] {grid-column:1/-1;order:5;justify-content:center}
}

/* Simulación del velero en lugar de la foto del banco de pruebas: mismo monitor que el de movilidad. */
#tfgView .boat-layout {max-width:1440px;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:clamp(28px,4vw,64px)}
#tfgView .sail-sim {grid-area:auto}
.sail-sea {display:block;width:100%;height:clamp(230px,24vw,360px);background:#0a2a3a;touch-action:pan-y}
.sail-read {display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding:14px 20px;border-top:1px solid #304b56}
.sail-read dt {font:500 11px var(--mono);color:#9ab9c4}
.sail-read dd {margin:5px 0 0;font:600 clamp(14px,1.6vw,19px) var(--mono);color:#aeffe1;font-variant-numeric:tabular-nums}
.sail-ctl {display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;padding:14px 20px 18px;border-top:1px solid #304b56}
.sail-ctl label {display:grid;gap:8px;font:600 13px var(--sans);color:#e3eef3}
.sail-ctl label span {display:flex;justify-content:space-between;gap:8px}
.sail-ctl label b {font:500 11px var(--mono);color:#79e9c6}
.sail-ctl input {width:100%;accent-color:#72e9bd;cursor:pointer}
@media(max-width:919px) {
  #tfgView .boat-layout {grid-template-columns:1fr;max-width:640px}
}
@media(max-width:440px) {
  .sail-ctl {grid-template-columns:1fr}
}