/* Workflow interactivo: escena SVG + panel de tarjetas.
   El atenuado NO se hace con opacidad sobre los instrumentos: el propio SVG
   trae una capa 'filtres' con un velo blanco por estacion que tapa todo menos
   su instrumento. El JS enciende el que toca. */

.wf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 2rem;
  align-items: center;
}

.wf-escena {
  position: relative;
  min-width: 0;
}

.wf-escena svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Solo las siluetas de instrumento reciben el raton.
   Todo lo demas -velos, numeros, plataformas, fondo- es decoracion y tiene que
   dejar pasar el puntero. El velo activo cubre TODO el lienzo menos su
   instrumento y se pinta por encima: si captura eventos, al encenderse una
   estacion ya no se puede pasar a otra sin salir antes del dibujo entero. */
.wf-escena svg * {
  pointer-events: none;
}

/* 'fill' y no 'auto': cuenta el area pintada, no la caja que la envuelve. */
.wf-escena [data-hit],
.wf-escena [data-hit] * {
  pointer-events: fill;
}

.wf-escena [data-hit] {
  cursor: pointer;
}

/* Con JS los velos estan siempre en el DOM y se cruzan con opacidad, que si
   admite transicion. Sin JS mandan el display="none" del fichero y la escena
   se ve limpia, sin velos apilados. */
.wf-js .wf-escena [data-capa="filtro"] {
  display: inline;
  opacity: 0;
  transition: opacity .22s ease;
}

.wf-js .wf-escena [data-capa="filtro"].wf-on {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .wf-js .wf-escena [data-capa="filtro"] {
    transition: none;
  }
}

.wf-escena [data-hit]:focus-visible {
  outline: 2px solid var(--e-global-color-secondary, #009b9e);
  outline-offset: 2px;
}

/* --- panel --- */

.wf-panel {
  min-width: 0;
}

.wf-hint {
  padding: 1.5rem;
  border: 1px dashed #cfdedd;
  border-radius: 12px;
  color: #5b7a78;
}

.wf-hint b {
  display: block;
  margin-bottom: .35rem;
  color: var(--e-global-color-text, #134e4a);
}

.wf-hint span {
  font-size: .9em;
  line-height: 1.5;
}

/* Un display explicito gana al [hidden] del navegador, asi que hay que
   devolverselo a mano o las tarjetas se apilan todas a la vez. */
.wf-card[hidden] {
  display: none;
}

/* En columna: la imagen arriba y el texto debajo. Al lado de la escena la
   tarjeta es estrecha, y en horizontal la foto se queda en un sello diminuto. */
.wf-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e3ecec;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 24px rgba(19, 78, 74, .08);
}

.wf-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f8f8;
}

/* La foto ocupa el bloque entero, de borde a borde. El recorte de la tarjeta
   le redondea las esquinas. */
.wf-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
}

/* El recorte vectorial si necesita aire: es un dibujo suelto sobre el fondo,
   no una foto, y a sangre se ve como un error. */
.wf-thumb > svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  padding: 1rem;
  box-sizing: border-box;
}

.wf-body {
  padding: 1rem 1.1rem;
  min-width: 0;
}

.wf-eyebrow {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 .35rem;
  font-size: .72em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5b7a78;
}

/* El numero del rotulo, en circulo, como los del dibujo. De frente y no en
   elipse: la perspectiva isometrica solo tiene sentido dentro de la escena;
   repetida en la tarjeta se lee como un circulo mal dibujado.
   El letter-spacing del rotulo se resetea o el digito queda descentrado: esa
   separacion se anade DETRAS de cada letra, tambien de la ultima. */
.wf-paso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background: #007880;
  color: #fff;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

/* Los dos colores salen del propio dibujo, medidos sobre el SVG: #007880 la
   rama de la muestra y #96ADED la del aire. No son variables globales de
   Elementor porque no lo son en el dibujo: primary es #009BA5, mas claro. */
.wf-paso--alt {
  background: #96aded;
}

.wf-title {
  margin: 0 0 .2rem;
  font-size: 1.15em;
  line-height: 1.25;
}

.wf-sub {
  margin: 0 0 .5rem;
  font-size: .9em;
}

.wf-text {
  margin: 0;
  font-size: .9em;
  line-height: 1.5;
  color: #4a6664;
}

/* Aviso de configuracion: solo lo ve quien puede editar. */
.wf-aviso {
  padding: .75rem 1rem;
  border-left: 3px solid #d97706;
  background: #fffbeb;
  color: #92400e;
  font-size: .85em;
}

/* --- responsive --- */

@media (max-width: 1024px) {
  .wf {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  /* En columna la tarjeta ya no esta al lado de la escena, asi que conviene
     que no tape el dibujo al aparecer: se queda debajo, en el flujo. */
  .wf-panel {
    position: static;
  }
}

/* Debajo de la escena la tarjeta ocupa todo el ancho: en vertical la foto se
   comeria la pantalla, asi que ahi si conviene ponerla al lado del texto. */
@media (max-width: 1024px) {
  .wf-card {
    flex-direction: row;
    align-items: stretch;
  }

  .wf-thumb {
    flex: 0 0 128px;
  }

  .wf-thumb img {
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  .wf-thumb > svg {
    max-height: 160px;
    padding: .5rem;
  }
}

@media (max-width: 576px) {
  .wf-thumb {
    flex: 0 0 104px;
  }
}

/* --- movil --- */

/* Por debajo de 768 px no hay raton, y el foco deja de tener sentido: el dibujo
   se ve entero, sin velo, y las fichas no se turnan — salen todas, una debajo
   de otra. Antes, pulsar un instrumento con el dedo tapaba el resto de la
   escena para destacar una ficha que aqui ya esta a la vista.

   Entra tambien en cualquier aparato sin hover, aunque sea ancho: sin raton y
   sin click no queda forma de destapar una ficha, y una tablet se quedaria con
   el dibujo mudo.

   Va en CSS y no apagando el JS: asi girar el movil o cambiar de ventana pasa
   de un modo al otro sin tener que escuchar el resize. El JS sigue marcando
   estaciones, pero no se ve porque estas reglas ganan a las suyas. */
@media (max-width: 767px), (hover: none) {
  .wf-js .wf-escena [data-capa="filtro"] {
    display: none;
  }

  .wf-escena [data-hit] {
    cursor: default;
  }

  .wf-js .wf-hint {
    display: none;
  }

  .wf-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .wf-js .wf-card[hidden] {
    display: flex;
  }

  /* Sin miniatura. En lista no distingue nada: el dibujo entero esta justo
     encima y ahi se ven todos los instrumentos, cada uno en su sitio, asi que
     repetirlos ficha a ficha solo alarga el scroll. Y donde no hay raton las
     fichas no se turnan, salen todas seguidas: una imagen de mas por ficha.

     Esconde tanto la foto de station_image como el recorte vectorial que
     inyecta el JS; los dos viven dentro de .wf-thumb.

     Va en este bloque, el ultimo del fichero, porque asi gana por orden de
     cascada a las tres reglas de .wf-thumb de mas arriba sin tener que subir la
     especificidad ni recurrir a !important. */
  .wf-thumb {
    display: none;
  }

  /* Aqui separa el gap del panel: el margen de la version sin JS sobraria. */
  .wf:not(.wf-js) .wf-card[hidden] {
    margin-bottom: 0;
  }
}

/* Sin JS no hay interaccion posible, pero el dibujo se ve entero y las tarjetas
   se listan una detras de otra en vez de desaparecer. La clase wf-js la pone el
   propio JS al arrancar, asi que su ausencia es la senal fiable. */
.wf:not(.wf-js) .wf-card[hidden] {
  display: flex;
  margin-bottom: 1rem;
}

.wf:not(.wf-js) .wf-hint {
  display: none;
}