/* Gimnasio — reusa la paleta y tipografía de main.css. Esto es una sección
   más de Info HJ, no otro sitio con otra cara. */

.gym { max-width: var(--max-w); margin: 0 auto; padding: 20px 16px 64px; }
.gym__titulo { font-size: 1.9rem; line-height: 1.1; margin: 0 0 8px; }
.gym__bajada { margin: 0 0 20px; color: var(--texto-sec); }
.gym__aviso { padding: 12px 14px; border-radius: 10px; margin: 12px 0;
              background: var(--bg-elev); border-left: 3px solid var(--acento); }
.gym__aviso--alto { border-left-color: var(--dorado); }
.gym__aviso--error { border-left-color: var(--rojo); }
.gym__legal { margin-top: 32px; font-size: .82rem; color: var(--texto-sec); line-height: 1.5; }

.gym-form { display: grid; gap: 14px; }
.gym-form__campo { display: grid; gap: 6px; font-size: .9rem; }
.gym-form__campo input, .gym-form__campo select {
  padding: 13px 12px; font-size: 1rem; border-radius: 10px;
  border: 1px solid var(--linea-fuerte); background: var(--bg);
  color: var(--texto); width: 100%; font-family: inherit;
}
.gym-form__enviar {
  padding: 15px; font-size: 1.05rem; font-weight: 700; border: 0;
  border-radius: 10px; background: var(--acento); color: var(--texto-claro);
  cursor: pointer; font-family: inherit;
}
.gym-form__enviar:hover { background: var(--acento-oscuro); }
.gym-form__enviar:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* "Cómo se hace" — la explicación de entrada en calor y cardio, una sola vez
   arriba de los días, para no repetir el mismo párrafo 5 veces al scrollear. */
.gym__como { padding: 14px 16px; border-radius: 10px; margin: 4px 0 24px;
             background: var(--bg-elev); }
.gym__como-item { margin: 0 0 8px; font-size: .9rem; line-height: 1.5; color: var(--texto-sec); }
.gym__como-item:last-child { margin-bottom: 0; }
.gym__como-item strong { color: var(--texto); }
/* La vuelta a la calma: mismo tratamiento, pero abajo del último día. */
.gym__vuelta { margin-top: 28px; padding: 14px 16px; border-radius: 10px;
               background: var(--bg-elev); font-size: .9rem; line-height: 1.5;
               color: var(--texto-sec); }
.gym__vuelta strong { color: var(--texto); }

.sesion { margin: 28px 0; }
.sesion__titulo { font-size: 1.25rem; margin: 0 0 10px; }
.sesion__sub { font-size: 1rem; margin: 18px 0 8px; color: var(--texto-sec); }
.sesion__calor, .sesion__cardio { font-size: .92rem; line-height: 1.5; }
.sesion__solo-cardio {
  padding: 14px; border-radius: 10px; background: var(--bg-elev);
  border: 1px dashed var(--linea-fuerte); font-size: .92rem; line-height: 1.5;
}

.ej { display: flex; gap: 12px; align-items: center; padding: 10px;
      border: 1px solid var(--linea); border-radius: var(--radio);
      margin-bottom: 8px; text-decoration: none; color: inherit; }
.ej:hover { border-color: var(--acento); }
.ej__foto { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex: none;
            background: var(--bg-elev); }
/* Sin foto: 16 de los 50 ejercicios no la tienen (cardio nunca la tuvo, y a
   otros se les sacó porque mostraba equipo que este gimnasio no tiene). El
   ícono ocupa el mismo espacio que la <img> para que la card no se deforme. */
.ej__foto--vacia {
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
}
.ej__nombre { font-size: 1rem; margin: 0 0 2px; }
.ej__series { margin: 0; font-size: .88rem; color: var(--texto-sec); }
.ej__maquina { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: .72rem;
               text-transform: uppercase; letter-spacing: .06em; color: var(--texto-sec); }
.ej__maquina img { width: 20px; height: 20px; object-fit: cover; border-radius: 4px; }

.detalle__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.detalle__fotos img { width: 100%; border-radius: var(--radio); }

/* Foto grande de la máquina, arriba de las instrucciones: primero se
   encuentra el aparato, después se lee cómo se hace. El chip de 20px de
   la lista se queda como está, esto vive solo acá. */
.detalle__maquina { display: flex; gap: 14px; align-items: center; margin: 16px 0 20px;
                     padding: 14px; border-radius: var(--radio); background: var(--bg-elev); }
.detalle__maquina-foto { width: 140px; height: 140px; object-fit: cover;
                          border-radius: var(--radio); flex: none; }
.detalle__maquina-texto { min-width: 0; }
.detalle__maquina-nombre { margin: 0 0 4px; font-weight: 700; }
.detalle__maquina-desc { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--texto-sec); }

.detalle__pasos { padding-left: 20px; line-height: 1.6; }
.detalle__pasos li { margin-bottom: 8px; }