/* ==========================================================================
   LA OBRA — la sección con mandos
   --------------------------------------------------------------------------
   Traída de la v7 tal cual. Es la pieza más interactiva del sitio: una barra de
   vídeo de verdad sobre una construcción que se puede rebobinar, y en la v8 se
   había quedado fuera.

   La misma paleta: grafito, caliza, ocre y el azul de plano para todo lo que
   sea instrumental. El mando se lee como una regleta de obra.
   ========================================================================== */

.obra{ display:flex; flex-direction:column; gap:18px; }

/* --------------------------------------------------------------- elección */
.obra__eleccion{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}
.obra__tipo{
  text-align:left; padding:14px 16px; cursor:pointer;
  background:rgba(233,224,206,.02);
  border:var(--trazo) solid var(--linea); border-radius:var(--r-1);
  transition:border-color .4s var(--e-cine), background .4s, transform .4s var(--e-cine);
}
.obra__tipo b{
  display:block; font-family:var(--f-texto); font-size:14px; font-weight:600;
  letter-spacing:.01em; color:var(--tinta);
}
.obra__tipo span{
  display:block; margin-top:4px; font-size:12.4px; line-height:1.5; color:var(--tinta-3);
}
.obra__tipo:hover{ border-color:var(--acero-hi); transform:translateY(-1px); }
.obra__tipo.on{ border-color:var(--ocre); background:var(--ocre-dim); }
.obra__tipo.on b{ color:var(--ocre-hi); }

/* ----------------------------------------------------------------- lienzo */
.obra__lienzo{
  position:relative; width:100%;
  aspect-ratio:16 / 9;
  min-height:320px;
  border:var(--trazo) solid var(--linea);
  border-radius:var(--r-1); overflow:hidden;
  background:#0F0E0C;
}
.obra__lienzo canvas{ display:block; width:100%; height:100%; cursor:grab; }
.obra__lienzo canvas:active{ cursor:grabbing; }
/* El cursor propio se apaga aquí dentro: sobre un lienzo que se arrastra, la
   mano del sistema dice lo que hay que hacer mejor que ningún anillo. */
html.con-cursor .obra__lienzo canvas{ cursor:grab !important; }
html.con-cursor .obra__lienzo canvas:active{ cursor:grabbing !important; }

/* Esquinas de encuadre: el detalle que hace que parezca un visor técnico. */
.obra__lienzo::before, .obra__lienzo::after{
  content:""; position:absolute; width:22px; height:22px; pointer-events:none;
  border:var(--trazo) solid var(--linea-cota);
}
.obra__lienzo::before{ top:12px; left:12px; border-right:0; border-bottom:0; }
.obra__lienzo::after{ bottom:12px; right:12px; border-left:0; border-top:0; }

.obra__rotulo{
  position:absolute; left:clamp(16px,2.4vw,30px); top:clamp(16px,2.4vw,30px);
  max-width:min(44ch, 62%); pointer-events:none;
}
.obra__paso{ display:block; font-size:9.5px; letter-spacing:.24em; color:var(--acero-hi); }
.obra__rotulo h3{
  font-family:var(--f-display); font-size:clamp(22px,2.7vw,34px); font-weight:400;
  line-height:1.1; color:var(--tinta); margin:6px 0 7px;
  text-shadow:0 2px 24px rgba(15,14,12,.85);
}
.obra__rotulo p{
  font-size:13.4px; line-height:1.6; color:var(--tinta-2); margin:0;
  text-shadow:0 1px 14px rgba(15,14,12,.9);
}

.obra__ayuda{
  position:absolute; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px);
  font-size:9px; letter-spacing:.2em; color:var(--tinta-3);
  border:var(--trazo) solid var(--linea); border-radius:20px; padding:5px 12px;
  background:rgba(15,14,12,.5); pointer-events:none;
  transition:opacity 1.4s var(--e-cine);
}
.obra__ayuda.se-va{ opacity:0; }

/* ------------------------------------------------------------------ mando */
.obra__mando{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 16px;
  border:var(--trazo) solid var(--linea); border-radius:var(--r-1);
  background:rgba(233,224,206,.02);
}
.obra__btn{
  width:40px; height:40px; flex:none; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:var(--trazo) solid var(--linea);
  border-radius:var(--r-1); color:var(--tinta-2);
  transition:border-color .3s, color .3s, background .3s;
}
.obra__btn:hover{ border-color:var(--ocre); color:var(--ocre-hi); }
.obra__btn:focus-visible{ outline:1px solid var(--acero-hi); outline-offset:3px; }
.obra__btn svg{ width:19px; height:19px; fill:currentColor; }
.obra__btn--play{ background:var(--ocre); border-color:var(--ocre); color:#F5EFE3; }
.obra__btn--play:hover{ background:var(--ocre-hi); border-color:var(--ocre-hi); color:#fff; }
.ic-pausa{ display:none; }
.es-reproduciendo .ic-play{ display:none; }
.es-reproduciendo .ic-pausa{ display:block; }

.obra__barra{
  position:relative; flex:1 1 220px; min-width:160px; height:30px;
  display:flex; align-items:center; cursor:pointer; touch-action:none;
}
.obra__barra:focus-visible{ outline:1px solid var(--acero-hi); outline-offset:4px; }
.obra__pista{
  position:absolute; inset:auto 0; height:3px;
  background:rgba(233,224,206,.13); overflow:hidden;
}
.obra__pista i{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:var(--ocre);
}
/* Las marcas son las etapas. Sin ellas la barra es una barra; con ellas es un
   plan de obra, y se entiende de un vistazo cuánto pesa cada fase. */
.obra__marcas{ position:absolute; inset:0; pointer-events:none; }
.obra__marcas i{
  position:absolute; top:50%; width:1px; height:11px; margin-top:-5.5px;
  background:var(--linea-cota);
}
.obra__reloj{ font-size:10px; letter-spacing:.1em; color:var(--tinta-3); flex:none; }

.obra__vel{ display:flex; gap:4px; flex:none; }
.obra__v{
  padding:6px 9px; cursor:pointer; font-family:var(--f-cota); font-size:10.5px;
  background:transparent; border:var(--trazo) solid var(--linea);
  border-radius:var(--r-1); color:var(--tinta-3); transition:all .3s;
}
.obra__v:hover{ color:var(--tinta); border-color:var(--acero-hi); }
.obra__v.on{ color:var(--ocre-hi); border-color:var(--ocre); background:var(--ocre-dim); }

/* ----------------------------------------------------------------- etapas */
.obra__etapas{
  list-style:none; margin:0; padding:0;
  display:grid; gap:6px;
  grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
}
.obra__etapas button{
  width:100%; text-align:left; cursor:pointer; padding:9px 11px;
  background:transparent; border:var(--trazo) solid var(--linea-2);
  border-radius:var(--r-1); transition:all .35s var(--e-cine);
}
.obra__etapas span{ display:block; font-size:9px; letter-spacing:.18em; color:var(--tinta-3); }
.obra__etapas b{
  display:block; margin-top:3px; font-family:var(--f-texto); font-size:12.6px;
  font-weight:500; color:var(--tinta-2);
}
.obra__etapas button:hover{ border-color:var(--acero-hi); }
.obra__etapas button:hover b{ color:var(--tinta); }
.obra__etapas li.on button{ border-color:var(--ocre); background:var(--ocre-dim); }
.obra__etapas li.on b{ color:var(--ocre-hi); }
.obra__etapas li.on span{ color:var(--ocre); }

/* ------------------------------------------------------------------ móvil */
@media (max-width: 720px){
  .obra__lienzo{ aspect-ratio:4 / 3; }
  .obra__rotulo{ max-width:78%; }
  .obra__reloj, .obra__vel{ display:none; }
  .obra__etapas{ grid-template-columns:repeat(auto-fit, minmax(108px, 1fr)); }
}
@media (prefers-reduced-motion: reduce){
  .obra__ayuda{ transition:none; }
}